Souper Styles
IMPORTANT: This page displays simple tutorials on codes that you can add to your style to make it look better. If you plan on using some of these codes in themes that we provided, please be aware that they may not work considering the code may already be used in the CSS. These are codes that we found to work on soup by messing around with the css. Some codes may not work for every theme or they may ruin a theme. If that is the case, just delete the code and everything should return to its normal state. Not all of the codes have been tested on EVERY soup layout. The most common layouts that we've tested these on are Default and BBQ. Please refer to the pictures next to each code so you know which layout to us it on. ENJOY.
1.Copy this code:
A:link { text-decoration: none;}A:hover { background: url(http://static.tumblr.com/blpgwiz/FCVlvkboa/flashingspace.gif);}</style>
<center><a href="http://4lisonwonderland.tumblr.com/" target=_blank title="Link Hover Codes">Hover code from 4lisonwonderland</a></center>
Link hover Effects (galaxy)
2. Open your soup customization box and paste the code at the bottom of your CSS.
3. Press preview and hover over any of the links in your soup. Your links should now look like the "after" picture on the right.
Fading images (hover)
1.Copy this code:
img, a img { border: 0px; opacity: 100; filter: alpha(opacity=100); -o-transition: opacity 1.5s linear; -webkit-transition: opacity 1.5s linear; -moz-transition: opacity 1.5s linear; }
img:hover, a:hover img {opacity: .75; filter: alpha(opacity=100); -o-transition: opacity .1s linear; -webkit-transition: opacity .1s linear; -moz-transition: opacity 1.5s linear; }
2. Open your soup customization box and paste the code at the bottom of your CSS.
3. Press preview and hover over any of the pictures in your soup. Your pictures should now look like the "after" picture on the right.
Top Menu bar edit
1.Copy this code:
#menu a {display:block; font-family:calibri; margin-left:10px; margin-bottom:3px; background-color:{color:border}; padding:5px; font-size:14px; font-style:none; text-align:center; text-transform:uppercase; color:#fff; width:80px}
2. Open your soup customization box and paste the code at the bottom of your CSS.
3. Press preview and your top menu bar should now look like the "after" picture on the right bottom.
As you can see, font was changed as well as the font size. Also, all text was shifted. To learn how to do a color change, continue ahead.
Changing the Colors:
1. Find the part of the code that reads
background-color: {color:border};
Replace {color:border} with any hex color code of your choice. For example, I'll be using the color code #c41a5e
Once you've replaced it, press preview and yours should like like the picture to the right except with your own chosen colors. If you need some hex color codes, I've provided a link to some in which you can just copy and paste.
You can also change the font , font size, and font color of the menu bar. Mess around with the code a little bit to see what else to can do!