|
CSS - Twitter Widget Customizing
Hey guys,
I am in the process of adding a Twitter widget onto my website. I would like it to be very similar to that on http://www.spotify.com/us/about/what/. I am not sure how to edit the currently provided Twitter widgets to resemble that... Has anyone any idea? PS. I am looking for a programmer for my startup company. No cash, but rather equity. We need someone fluent in PHP. Similar TutorialsHello, I am running wordpress and I have a Twitter Widget known as Twitter Widget Pro. What I've done is that I made a graphic (a little TV with a twitter bird on top) to serve as a background image but be positioned right behind my Twitter widget so the twitter feed fits inside the tv. I got this positioned correctly on the front page in my style.css sheet. But as I go to my other pages: photos, travels, etc. the format of my site changes and therefore the background image (tv) and the Twitter feed don't align properly. How can I code the background image of the tv and the twitter widget to align properly together on all my pages? Would I have to insert the image into the actual twitter-widget-pro code itself? My website is: (w w w.stefantrego.com) Thanks a lot for the help! -Stefan I am trying to customize some links. However, everything I've found shows how to customize all the links (using a:active, etc.). I cannot find the syntax to create a style that I can apply to specific links. Can someone help? TIA. Hi, can anyone give me a hand with customizing my lists? I am trying to do something like here, http://www.microsoft.com/, but with a semi-transparent background in the nav bar. It works if I have borders around the links, which is fine if I had a solid bg as I can hide them, but being semi-transparent I have a problem, and when I remove them it causes a shift when moving over a link. Any ideas?? Hi, I am importing a Word Press blog to a web site, but it looks kind of sloppy. You can see it here : What I need to do is just present the title, and maybe the first 100 characters, then have a "read more" link. Once this link is clicked, the full article will show on the same page. I think I might need to use a JavaScript library as well, but I know I will need some CSS. If someone could give me a general idea of how to go about this, I would appreciate it. Links and resources are also welcome. thanks Hi there! I'll cut right down to the chase: is my method of styling form input fields efficient? Is there a better way to do it? I tried directly styling the input, rather than putting it in a div, but it didn't work in IE (when too much text went into the field, the background would move, no matter what I did. ) Also, is my <label> styling okay? HTML Code: Original - HTML Code <div class="formRow"> <div class="textInput"> <input class="textInput" id="name" type="text" /> <label for="name">Name</label> </div> </div> <div class="formRow"> <div class="textInput"> <input class="textInput" id="name" type="text" /> <label for="name">Name</label> </div> </div> CSS Code: Original - CSS Code #content div.formRow:hover { background-color: #EEE; } #content input.textInput { font-size: 14px; color: #666; padding: 3px 5px; width: 190px; height: 20px; border: 0; background-color: transparent; } #content input.textInput:focus { color: #000; } #content div.textInput { margin-left: 50px; background: transparent url('images/textInput.png') no-repeat; } #content div.textInput label { font-size: 14pt; font-weight: bold; margin-left: 50px; vertical-align: top; }
And lastly... my image: Thanks a lot! Anyone have a clue what I can add to this code to get it working right?! Here is the code for one of them... Code: <!-- AddThis Button BEGIN --> <td class="vbmenu_control" id="facebook" nowrap="nowrap"> <script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script> <div class="addthis_toolbox addthis_default_style"> <a class="addthis_button_facebook"></a> </div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=***"></script> </td> <!-- AddThis Button END -->
Here is how it looks in FF... http://i34.tinypic.com/28it845.jpg Here is how it looks in IE... http://i34.tinypic.com/27yanvb.jpg Thanks for your help!!! I'm getting a strange interaction between a CSS-positioned image and a widget placed farther down the page. I've tested it in FF3.5.7 and IE8, and everything works fine until I test it in Compatibility View in IE. The widget takes a few seconds to load; once it's loaded the image at the top of the page disappears. The layout is basically this: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head></head>
<body>
<table>
<tr>
<td><div style="position:relative;margin:50px 0 0 0">
<table>
<tr>
<td>Some content</td>
<td rowspan="2"><img style="position:relative;margin:-50px 0 0 0" src="#" width="250" height="375" /></td>
</tr>
<tr>
<td>Some content</td>
</tr>
</table>
<table>
<tr>
<td>Some content</td>
<td><img style="visibility:hidden;width:0px;height:0px;" border="0" width="0" height="0" src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNzY2NTc4MzAyNzAmcHQ9MTI3NjY1ODUyNzM1MiZwPTEwODQwMDEmZD*mZz*yJm89MDQ2ZDg3MzBjNDc4NDExZTkw /YTVmZDcxNzhiYmQ1MGYmb2Y9MA==.gif" /><object width="394" height="350" id="W4afb54b3f6d091a24b057108737c9fbe" data="http://www.5lovelanguages.com/widget/5LL-assesment-widget.swf" type="application/x-shockwave-flash">
<param value="http://www.5lovelanguages.com/widget/5LL-assesment-widget.swf" name="movie"/>
<param value="transparent" name="wmode"/>
<param value="all" name="allowNetworking"/>
<param value="always" name="allowScriptAccess"/>
</object></td>
</tr>
</table>
<table style="position:absolute;left:0;top:-50px">
<tr>
<td>Some content</td>
</tr>
</table>
</div></td>
</tr>
</table>
</body>
</html>
I don't know anything about how the widget works. Can anyone help me fix this problem? Hi, I have created a accordion menu using a spry widget built into Dreamweaver CS3. However I want to amend this so that the menu is collapsed until the user clicks on a category. Do I have to amend the CSS or the javascript to make it collapsed to begin with? Any help would be appericated. Thanks Gary Hi, Trying to get this widget to disappear using responsive design when the browser is less than 800px. I'm using WordPress and the theme is already responsive. Here's the media query in the style sheet now: @media only screen and (max-width: 800px) { /* and I added this part below (not working!) */ .page-title .widget-area { display:none !important; } } Please see http://simplemethod.ca to check it out. I'm trying to remove my big fancy title widget with the signup form in it (since it breaks in an ugly way when the responsive design kicks in!) Thanks for helping friends. I hope my post made some sense! Perhaps I'm using the wrong class names for the style change... This part has got me a bit stumped. Best Regards, Drew How do I apply a css drop shadow around the search widget generated by this script code? Code: <script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('dfacd65d-6514-4845-ad81-7249d33a6280');</script>
<noscript>Get the <a href="http://www.widgetbox.com/widget/college-search">College search</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://support.widgetbox.com/">More info</a>)</noscript>
Novice at CSS. I have a Blogger website. I'm trying to put a CSS dropdown menu. In Safari, it works fine. Don't have access to Firefox, so I don't know, but in IE (6&7) the dropdowns are hidden behind any other widgets on the page. I've seen plenty of forum posts regarding this issue with flash player, but none specifically addressing IE and Blogger widgets. I've tried adjusting z-index in each li, ul. I'm still really new at this, so I'd appreciate any help and specific guidance you can offer. Website: crossfit-hr.com CSS code (source from CSS MENU MAKER): .menu{ width:945px; border:none; border:0px; margin:0px; padding:0px; font-family:verdana,geneva,arial,helvetica,sans-serif; font-size:12px; font-weight:bold; font-color:#FF0000; z-index:200; } .menu ul{ background:url(removed for thread) top left repeat-x; height:43px; list-style:none; margin:0; padding:0; } .menu li{ float:left; padding:0px 8px 0px 8px; z-index:200; } .menu li a{ color:#000000; display:block; font-weight:bold; line-height:43px; padding:0px 10px; text-align:center; text-decoration:none; } .menu li a:hover{ color:#FF0000; text-decoration:none; } .menu li ul{ background:#e0e0e0; border-left:2px solid #0079b2; border-right:2px solid #0079b2; border-bottom:2px solid #0079b2; display:none; height:auto; filter:alpha(opacity=95); opacity:0.95; position:absolute; width:150px; z-index:10000; /*top:.5em; /*left:0;*/ } .menu li:hover ul{ display:block; } .menu li li { display:block; float:none; padding:0px; width:150px; z-index:200; } .menu li ul a{ display:block; font-size:12px; font-style:normal; padding:0px 8px 0px 8px; text-align:left; } .menu li ul a:hover{ background:#949494; color:#FF0000; opacity:1.0; filter:alpha(opacity=100); } .menu p{ clear:left; z-index:200; } .menu #current{ background:url(removed for thread) top left repeat-x; color:#FFFFFF; } ========================= HTML code for Widget: <div class="menu"> <ul> <li><a id="current" href="(removed for thread)" target="_self" >Home</a> </li> <li><a href="" target="_self" >Methods & Results</a> <ul> <li><a href="(removed for thread)" target="_self">Our Methods</a></li> <li><a href="(removed for thread)" target="_self">See the Results</a></li> </ul> </li> <li><a href="" target="_self" >How to Start</a> <ul> <li><a href="(removed for thread)" target="_self">Starting Options</a></li> <li><a href="(removed for thread)" target="_self">Sign-Up Form</a></li> </ul> </li> <li><a href="" target="_self" >Schedule & Prices</a> <ul> <li><a href="(removed for thread)=dctrh782_10dsmgnqhq" target="_self">Class Schedule</a></li> <li><a href="(removed for thread)" target="_self">Prices</a></li> </ul> </li> <li><a href="(removed for thread)" target="_self" >Coaches</a> </li> <li><a href="" target="_self" >Admin & Media</a> <ul> <li><a href="(removed for thread)" target="_self">Online Payments</a></li> <li><a href="(removed for thread)=0" target="_self">Release Form</a></li> <li><a href="(removed for thread)" target="_self">CFHR Photos</a></li> <li><a href="(removed for thread)" target="_self">CFHR Videos</a></li> </ul> </li> <li><a href="(removed for thread)" target="_self" >Contact</a> </li> </ul> </div> =================== I'm using the Spry tabbed panels widget on a website. I would like to center align the horizontal tabs. The default setting is left align. And I'm able to right align it. Here is part of the css code: .TabbedPanels { margin: 0px; padding: 0px; float: left; clear: none; width: 100%; } .TabbedPanelsTabGroup { margin: 0px; padding: 0px; } .TabbedPanelsTab { position: relative; top: 1px; float: left; padding: 2px 6px 6px 6px; margin: 0px 0px 0px 0px; list-style: none; border-left: solid 1px #999; border-bottom: solid 1px #CCC; border-top: solid 1px #CCC; border-right: solid 1px #999; -moz-user-select: none; -khtml-user-select: none; cursor: pointer; background-image: url(../sprylight.png); color: #333333; I've tried changing the "padding" under the ".TabbedPanelsTabGroup" rule to "auto". This causes the tabs to kind of be centered, but not exactly. Also, one of the tabs breaks apart from the row and spills over to the next line. Any help would be very much appreciated. Hi, Hope you can help. I'm having trouble trying to figure out why the links in my twitter feed have the same Background color thats applyed to my navbar. (#9933CC. I'm certain I isolated the CSS to affect only the navbar. For some reason its affecting the twitter feed and I can work out why. Can you help?? My site is below. www. smartbod co.uk (Delete spaces in url as I cant post link as im new) Thanks in advance David Hello! I have the site (w w w . s t e f a n t r e g o . c o m /wordpress) ... and I am trying to place a tv graphic I made under my twitter feed as an aesthetic effect. Currently I have: body { background-image:url('/Images/tregotv.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position:983px 400px; display:block; } This looks fine on my computer -- BUT -- when I go to my photo section, travels section, the format of the site changes. Therefore my background image and twitter feed don't align correctly. Is there any CSS way to correctly align the background image to always be positioned under my twitter feed without format issues? Or would I need to get assistance with an alternate code such as Java script, or PHP to position the picture so the twitter feed always fits inside the tv? I appreciate the help!! -Stefan twitter: @stefantrego w w w . stefantrego . c o m / w o r d p r e s s PS. Sorry for the spaced out web addresses -- due to being a new user I cannot post links right away. |
|||||||