Solved

Help skinning wordpress blog

Posted on 2010-09-20
20
343 Views
Last Modified: 2012-05-10
Hi,

I need some help in skinning my loop / posts on my blog (not live). I would like each post to be contained within its own background colour and to have some padding between posts so that they stand out. Something similar to vostok[dot]es/blog/

My blog can be found wychburyenergy[dot]com/news
0
Comment
Question by:newbey
  • 11
  • 9
20 Comments
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 33723973
Access your wordpress directory -> wp-content -> themes -> (NAME OF DEPLOYED THEME).

In that folder you will find a file called style.css, search the code for:  

ul.post-meta

As a test add a background like this:

ul.post-meta {
      list-style: none;
        background:#f00;
}

If your blog entries now have a red background let me know.

Easynow
0
 

Author Comment

by:newbey
ID: 33724511
Hi,

I can't fins a ul.post-meta class in the style sheet. I have added a class as above but there is no change on the background colour?

Thanks for looking
0
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 33724846
Can you post a link to the style sheet? is it definitely located in the named themes folder?
0
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 

Author Comment

by:newbey
ID: 33725614
style.css attached, it is definitely in the named themes folder
style.css
0
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 33725697
Try adding this instead

.post {
        background:#f00;
}
0
 

Author Comment

by:newbey
ID: 33725864
still nothing?
0
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 33726368
can you zip the theme folder and post? or give link to where u got it?
0
 

Author Comment

by:newbey
ID: 33726637
Here you go....
mywordpress.zip
0
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 33726687
Ok this is a guess but try this: (open page.php)

Replace this line:
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

To read:
<div id="post-<?php the_ID(); ?>" class="testclass">

Then (open style.css)

And add this:
.testclass
{
    background:#f00;
}
0
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 33726797
Forget what i just said....

I just tested my earlier suggestion, and added:

.post
{
background:#f00;
}

to the very bottom of the style.css and it worked... please try that again, make sure its at the bottom.

Easynow
0
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 33726815
To ensure you have the correct style.css try renaming it to style2.css, it should mess the whole page up...
0
 

Author Comment

by:newbey
ID: 33726865
If I try and rename it to style2.css I get the following error message:

Warning: fopen(/home/content/31/6593431/html/news/wp-content/themes/wychbury/style.css) [function.fopen]: failed to open stream: No such file or directory in /home/content/31/6593431/html/news/wp-includes/functions.php on line 4165

I tried to put the post at the bottom of the stylesheet and nothing - is it because I am using 2 stylesheets?

I followed the instructions from this website to try and integrate it with my existing style

www[dot]rivergraphics[dot]net/resources-tutorials/how-to-integrate-a-wordpress-blog-into-your-existing-website/
0
 
LVL 12

Accepted Solution

by:
Dean OBrien earned 500 total points
ID: 33726913
Very strange.... because the post blocks have a class called 'post'. The only reason it wouldnt work is if there was an overriding style...

going back to earlier suggestion then, try this (in the file page.php):

Replace this line:
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

To read:
<div id="post-<?php the_ID(); ?>"  <?php post_class(); ?> style="background:#f00;">

If that doesnt do anything then im out of ideas sorry

Easynow
0
 

Author Comment

by:newbey
ID: 33727073
I can see red!
0
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 33727330
haha thats a start then...

You should now be able to apply any css styles you like within the style quotes. i.e.

style = 'background:#eee;border-style:solid;border-width:1px;"

Easynow
0
 

Author Comment

by:newbey
ID: 33727369
Thanks, i'll have a look. Do I need to use padding to space my posts out?
0
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 33728377
try playing with padding and margin
0
 

Author Closing Comment

by:newbey
ID: 33730071
Thanks for your help, at least I know where to look.
0
 

Author Comment

by:newbey
ID: 33871514
Hi easynow111,

I know this post is closed now but could you let me know how I can reduce the size of the title text on the posts?
0
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 33873530
Look for this code in your page.php file:

                              <?php if ( is_front_page() ) { ?>
                                    <h2 class="entry-title"><?php the_title(); ?></h2>
                              <?php } else { ?>      
                                    <h1 class="entry-title"><?php the_title(); ?></h1>
                              <?php } ?>      

Add style elements as we did before:

                              <?php if ( is_front_page() ) { ?>
                                    <h2 class="entry-title" style="ADDSTYLEHERE"><?php the_title(); ?></h2>
                              <?php } else { ?>      
                                    <h1 class="entry-title" style="ADDSTYLEHERE"><?php the_title(); ?></h1>
                              <?php } ?>      

Easynow
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
This article discusses four methods for overlaying images in a container on a web page
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question