Solved

Help skinning wordpress blog

Posted on 2010-09-20
20
341 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
ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

 

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

Complete VMware vSphere® ESX(i) & Hyper-V Backup

Capture your entire system, including the host, with patented disk imaging integrated with VMware VADP / Microsoft VSS and RCT. RTOs is as low as 15 seconds with Acronis Active Restore™. You can enjoy unlimited P2V/V2V migrations from any source (even from a different hypervisor)

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…

770 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