Solved

Help skinning wordpress blog

Posted on 2010-09-20
20
333 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
 

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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The purpose of this video is to demonstrate how to Import and export files in WordPress. 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 : Click on Too…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

708 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now