[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Help skinning wordpress blog

Posted on 2010-09-20
20
Medium Priority
?
348 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

 

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 2000 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

Independent Software Vendors: 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!

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article shows the steps required to install WordPress on Azure. Web Apps, Mobile Apps, API Apps, or Functions, in Azure all these run in an App Service plan. WordPress is no exception and requires an App Service Plan and Database to install
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

656 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