Its amazing how some simple CSS tweaks like changing the background color or adding a border can drastically change the overall design of a site.
Here are two ways you can personalize your site by adding some simple bits of code to your custom stylesheet. Just paste these code snippets into the custom.css and change the colors to your liking.
Adding a Simple Border
The following code makes the site content more distictive while preserving all the white space.
body.custom #container { border: 1px solid #cccccc;} body.custom ul.menu { right: 10px;} body.custom #rotating { border-top: none;}
- First rule adds a simple border around the entire content area
- The 2nd & 3rd style rules are minor tweaks for better integration of things. 2nd moves the top level menu a bit to the right and the 3rd removes the top border above the rotating header images.
Changing the Background Color
The following CSS code makes for a crisp overall design.
body.custom { background: #444444;} body.custom .homelink a { color: #ffffff;} body.custom .homelink a:hover { color: #ffffff;} body.custom .description { color: #cccccc;} body.custom ul.menu { right: 10px;} body.custom #rotating { border-top: none;}
- The first style rule changes the background color to a deep grey.
- Since we chose a dark background, we need to pick a lighter contrasting color for the site title and tagline, for them to be clearly visible. In this case 2nd & 3rd rules change the color of the title and the 4th changes the color of the tagline.
- The last two style rules are minor tweaks to balance the overall design. 5th moves the top level menu a bit to the right and the 6th removes the top border above the rotating header images.
I am using your theme. It has ONE little issue.
Sidebars do NOT load in Internet Explorer 7.0 at all.
I have stuff in both, Ads and stuff… Zero loading at all.
Works fine in Firefox, but no sidebars in I.E. 7.0
Other than that, I love it.
-Chuck AKA Paleo Pat
Hi I was wondering if you could help me showing how to modify the archieve instead of select month drop down I would like to show the months. Sorry if it is a stupid question but I am starting now and I have not much knowledge.
@Chuck Adkins
Thanks Chuck, I just saw your site & sidebars were loading fine in IE7. I may be a little late and I’m guessing you’ve already figured it out.
@Carmen
Hi Carmen, no question is stupid.
What you want is to do with the Archives widget. Go to Design > Widgets. Click edit on the Archives widget in your Sidebar-1 widgets. uncheck the box next to “Display as a drop down” and save changes.
Hello,
I’m using your theme for http://www.ccraleighyouth.com.
I like it a lot, especially the rotating headers. Thanks for making it available!
I have a question I didn’t see answered on here anywhere:
How do I add a ‘comments’ link to a page?
I have the page settings setup to allow comments, but the link doesn’t seem to show up anywhere, and I’m guessing it’s a caveat of the template.
Is there any way you know of to turn on comments for pages?
Thanks!
-Zack
Thank you Zack,
Another option has to be selected to activate comments for Pages. When you open a Page to edit, Under Advanced Options > Page Template, select “Allow Comments” from the drop down list.
Uhm. No I have not. I wonder why they’re not displaying for me?
Hmmmm…
-Chuck
P.S. could I have a setting wrong in I.E. 7.0?
Hi Ravi,
for some reason I do not get the same font and fontsize in the sidebar on my homepage as on the other pages, do you know why?
@Chuck
Just checked your site again and saw the problem. It might be because of a plugin you are using. one particular problematic post that’s causing this is “Democrats and a Police State”. there might be more of these.
As per the flow of elements in the theme, sidebars are loaded after the content completes loading but ie7 is choking (breaking off) at this particular post without completely loading the content and hence no sidebars.
@Sanna
Could you give me a link so I can check it out.
Ravi,
Thank you for your reply. I actually do have ‘allow comments’ and ‘allow pings’ selected.
I tried unselecting ‘allow pings’ just to force an update and it still didn’t help.
I also thought it might be an interaction with the ’sociable’ widget, so I turned that off, but I still don’t see any comments link.
Any ideas?
@Ravi
As luck would have it, I fired up I.E 7.0 went through the security settings and did a RESET to default and everything went back to normal. But it’s working fine now.
Thanks again.
-Chuck
sorry
I havent put it out live yet..but here is the link
salamanderpm.se/wordpresstest/wordpress
thanks for helping me!
Hello Ravi,
First of all thanks for this great theme.
I have a question about uppercase words. I dont want the sidebar widget titles to be uppercase. How can I change it? I couldn’t see anthing about uppercase text in the theme files. Can you please help me about this problem?
@Chuck
happy to hear that.
@Sanna
It might be me, but I found both font and fontsize, consistent on your home page & other Pages. Font size in the content column is 13px and and sidebar is 12px. With the exception of the tag cloud, these sizes are displayed consistently across your site.
@Johny
Thanks lot Johny,
add this code to your custom.css
body.custom .widget h2 { font-variant: normal; }All in all great template, thanks for your work…I have a question about the header graphic…I only wanted one static pic, so I uploaded it and removed the others. It seems, though, that there’s a hitch when navigating my site, a split second before the picture repopulates the new URL.
how would I go about removing the “rotate” references in the code so that it’s not continuously trying to rotate between just one graphic.
Any help would be greatly appreciated!
Ryan
Ravi,
Any ideas about my last question?
Thanks!
beautiful theme.
please tell me
how i add image border?
@Zack
I’m really sorry Zack. I mistook your comment to be mine and missed it.
What I meant earlier was there’s another option, you have to select, in addition to checking ‘allow comments’ & ‘allow pings’. Its under the second from last option titled Page Template. Select ‘Allow Comments’ from the dropdown list. This one is not a checkbox.
@Ryan Barnes
Thanks Ryan. I wrote about it but took it off again to keep things simple. Anyways, open
header-images.phpin the primepress folder, delete everything in there and paste this code. put in your image file name in place oflogo.jpgand specify the image height.<img src="<?php bloginfo('template_url'); ?>/headers/logo.jpg" height="240" width="920" alt="<?php bloginfo('name'); ?> Header Image" />@seriyoz
thanks seriyoz. add this code to your custom.css and alter the color to your liking.
body.custom #rotating img { border: 2px solid black; }Hi Ravi,
Thanks for the reply…I replaced the code, but now my picture is not showing up on the site at all! What did I miss? I added some of the suggestions you mentioned in posts to the custom.css, but I don’ think that would have done anything. My image name on the server has a space (it’s called opening cropped.jpg)…is the space causing a problem?
Best,
ryan
hi Ryan,
yes… it’s the space thats causing the problem. I see the filename in your code as
opening_cropped.jpgtry typing in the exact filenameopening cropped.JPGor rename the image without spaces and match it to the one in your code.Ah, yes….Even though I’m a complete 2.0 newbie, I still have regressive html parameters swimming around my brain somewhere…Thanks so much for your help, made the changes and everything seems AOK.
Best,
Ryan
thnx Ravi Varma, for your response
i mean post image border? please
Thanks for the reply Ravi.
I have one more question. How can I make uppercase “i” give “İ” instead of “I” in my header?
If this is not possible, how can I cancel the uppercase for header?
@Ryan
@seriyoz
Add a class=
borderin your<img />tag<img src="../image.jpg" alt="image" width="" height="" class="border size-full wp-image-01" />@Johny
Try typing in the “İ” character in your title. If that doesn’t work, add this code to your custom.css to cancel the uppercase.
body.custom .homelink { font-variant: normal;}@Ravi
Thanks for your great advice. Typing İ worked. I am really ashamed.
That did the trick!
Thanks!
I have two iterations of PrimePress running and I want to link them together but am having trouble. I can make a page with a hyperlink on it to jump to the home page of the other, but would prefer to be able to click on the page tab above the header image on one, and go to the home page of the other directly without having the additional step of clicking the link on the page, itself.
How can I redirect the URL that the page tab is sending out to go to the other blog’s home page instead of to a page within the current blog? The two sites are, “myServe.biz” and “myServe4U”
Any suggestions would be appreciated
Thank you
@Johny and Zack
glad it worked.
@Carol
Hi Carol, It can be done. Instead of creating a page you’d have to edit a theme template file. Open
main-menu.phpin your primary blog (myServe) and add this code at the end to link to your secondary blog.Do the same on your secondary blog (myserve4u) but add a link to your primary blog like this.
Hello again Ravi - still enjoying the theme and at the same time trying to learn the coding hierarchy as quickly as possible. I am getting two search boxes within my sidebars, but only one is set up through the widgets. I can’t find a reference to the other one (which has the missing left-hand border) in the sidebar.php or the CSS.
Can you see where that code is hidden? I’m also looking for the code dealing with the RSS feed. I’ve changed the icon and would like to make the box a little taller so it will fit.
Thanks in advance for any advice!
Best,
Ryan
Hello using your template for my very first wordpress blog but have a little problem i want to add a new page to blog but this over laps the site description at the top of page so wonder how i would move the description up a little so it’s not in the way of any new page tabs
@Ryan
Hi Ryan, great job there… very tidy.
The feed box and search box at the top are built into the sidebar and not widgetized. customizing these (dimensional changes) without losing the balance will take more of your time. Anyways, here’s how you target them. the reference to the search box is
#pp-search(line no.140 in style.css) and the feed box is#pp-feed(line no.136).custom code samples to change these:
body.custom #pp-search { display: none;} body.custom #pp-feed { height: 50px;}1st one turns off the search box.
2nd increases the height of the feed box.
Also check this comment for some more help.
@Eyerex
paste this code into your custom.css It moves the description up by 35 pixels.
body.custom .description { padding-bottom: 35px;}Thank you for the help, the hyperlink works great !!! Now I can click on the tab and go straight to my other site. Carol
Hello
Thanks for this supreme theme Ravi.
Can you describe how to get an image in the background?
I would like to put the image half way under the content.
Does Primepress support the plugin “All in one SEO”? I cant get it to work.
@Morlandascout
Thanks pal.
Below are the CSS codes that govern the background image. The values are dependent on the image and the effect you want to achieve with it.
upload the image into the images folder inside the primepress directory. Paste the following code into your
custom.cssand change the values accordingly.body.custom { background-image: url(images/image.jpg); } body.custom { background-repeat: no-repeat; } body.custom { background-position: top center; }1st one is the path to your image. type in your filename in place of image.jpg
2nd is for how you want the image to repeat
3rd is for position of the image.
this theme supports the ‘All in one SEO pack’ plugin and it seems to be working fine on your site.
Hi Ravi, thanks for the superb theme. Very tasty.
I need to have a static front page but I’ve ended up with a duplicate ‘Home’ link.
Could you be so kind as to post a blog explaining the easiest/best way to create a static homepage that avoids the duplicate home link when using PrimePress?
Thank you for the reply regarding color changes…the heading worked great; however, after placing the code in custom.css the headings that appear anywhere on the page, below the header will not change from the default blue.
I am sure I must be missing something, please help. Thank you in advance. Carol
Hello again, I am not sure my last question #35 was asked with specific details…..I would like to change the post headings on my home page….how do I do this? Thank you. Carol
@Christiaan
a little late but here’s the how of a WordPress static homepage.
@Carol
I see the earlier code working fine. In case you want to change the link color all across your site, here’s the code you paste in your
custom.cssbody.custom a { color: #cc6600;}Hi Ravi,
My first question is in regard to post #33 above… I tried to add a background image using the code you supplied, but the image didn’t show through the tables holding the content of my blog. I’d like to be able to see the image behind the text, but keep a background color in the widgets.
Which brings me to my second question, is there a way to change the background color of the widgets? (I hope that’s the correct terminology! I’m talking about the light gray boxes… ie. recent posts, calendar, etc.)
Thank you so much for such a brilliant theme!! I’m in love with it!!
Thank you Liesel,
You couldn’t see through the content because the background color of the site content is set to white by default. nevertheless, here’s the code to make it transparent. Just paste it in your
custom.cssbody.custom #container { background-color: transparent; }you are spot-on.. they are called widgets and here’s the code to change their background color. paste it and change the color to your liking.
body.custom .widget { background-color: #dddddd;}Hi Ravi,
I still have yet to resolve the extra search box, but only because I’ve been so busy that I had to relegate it lower in my list! Thanks again for all your help.
I have (surprise!) another question, but this one should be easy….how do I create a page that doesn’t have any sidebars, or just one sidebar? I have a spreadsheet that I want to post to the “Portfolio Ledger” page - you can view it now, but I’d like a larger viewing area along the right. What’s the cleanest way to go about this?
Thanks in advance - your support for the template is much appreciated…
Ryan Barnes
Hi Ryan.
A Page with no sidebars is easier at this point than a Page with 1 sidebar. So here’s a Page template to get rid of the sidebars. Download it, upload the ‘
page-nosidebars.php‘ to the PrimePress folder and use it for that particular Page (In your WordPress admin Page editor, under ‘Page Template’ select ‘No Sidebars’).Hi Ravi!
Absolute FANTASTIC template and so much more that there is an active support behind it! THANK YOU!
Quick question: What is the css tag used to change the posts text size?
Thanks
Nevermind, Ravi - I discovered it. I have however another question:
Check the text wrap in this post that also have a YouTube video enbedded. See you the text aligns right and the youtube video margin masks some of it? I tried a hspace=”10″, that worked in previous templates but not in this one. Any clue how can I control this? Thanks!
The post: http://www.mamaliga.com/recipes/mamaliga-recipe
Ravi, can’t seem to locate how I can customize the title color of the “Subscribe To Feed” button/link . Is this done is custom.css or someplace else? Help?
Ravi,
Again, excellent theme and wonderful active support. As you might remember, I am using WordPressMU.
I’d like to make the custom changes to the theme on a blog by blog basis. I thought that I could do that by using a call to get the blog name and concat that with -custom.css. Just would have to find out where custom.css is called and them do and if exist… I think.
What do you think? How would you go about making custom CSS changes unique to each blog?
- Carl
Ravi,
I did a hack of my own to add this feature. Perhaps a bit inelegant, but it works.
I added the line:
<link rel="stylesheet" href="/custom.css" type="text/css" media="screen" />on line 12 after the call of custom.css.
So if it doesn’t exist, no big deal for that particular blog, if it does exist, it will overwrite the customizations that are in custom.css.
Then all that is needed is for each blog to have its own custom.css file with the naming convention myblognamecustom.css.
Well darn, that didn’t come out so well… I hate trying to figure out how to show my code in the comment post when it has PHP calls.
LOL.
Ravi, Thanks for your patience - got it done. Just for future reference it is also in the custom.css and is just a regular link - ha!
a{text-decoration:none; color:#2F4F4F;} Thanks again for a great template and all your work!
@Gabi
Thank you Gabi. Copy these styles to your custom stylesheet and use the class=”alignleft” or class=”alignright” instead of hspace and align=”right”. Somehow, they slipped my mind when releasing the theme. nevertheless, I’ll add them in the next release.
object.alignright { padding: 10px 0 10px 10px; } object.alignleft { padding: 10px 10px 10px 0; }@Carl
Hey Carl, I haven’t worked much on MU but I’m curious about these clever little mods. please do let me know, when the site goes live. btw use this very handy tool for pasting code anywhere.
@gemma
thanks gemma, glad you’ve worked it out.
Hi
quick question i got your theme up and running and altered the color scheme to my needs although i made a staticpage and put a image of a frog but for some reason i get a border around the image wich bugs the heck outta me
you can see the issue att http://www.amphibians.se
i changed all border:1px to border:none but i got all borders out but this one…
got any suggestions ?
cheers Martin