Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 357
  • Last Modified:

Help skinning wordpress blog

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
newbey
Asked:
newbey
  • 11
  • 9
1 Solution
 
Dean OBrienCommented:
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
 
newbeyAuthor Commented:
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
 
Dean OBrienCommented:
Can you post a link to the style sheet? is it definitely located in the named themes folder?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
newbeyAuthor Commented:
style.css attached, it is definitely in the named themes folder
style.css
0
 
Dean OBrienCommented:
Try adding this instead

.post {
        background:#f00;
}
0
 
newbeyAuthor Commented:
still nothing?
0
 
Dean OBrienCommented:
can you zip the theme folder and post? or give link to where u got it?
0
 
newbeyAuthor Commented:
Here you go....
mywordpress.zip
0
 
Dean OBrienCommented:
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
 
Dean OBrienCommented:
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
 
Dean OBrienCommented:
To ensure you have the correct style.css try renaming it to style2.css, it should mess the whole page up...
0
 
newbeyAuthor Commented:
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
 
Dean OBrienCommented:
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
 
newbeyAuthor Commented:
I can see red!
0
 
Dean OBrienCommented:
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
 
newbeyAuthor Commented:
Thanks, i'll have a look. Do I need to use padding to space my posts out?
0
 
Dean OBrienCommented:
try playing with padding and margin
0
 
newbeyAuthor Commented:
Thanks for your help, at least I know where to look.
0
 
newbeyAuthor Commented:
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
 
Dean OBrienCommented:
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 11
  • 9
Tackle projects and never again get stuck behind a technical roadblock.
Join Now