Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 02-18-2013, 10:26 PM   PM User | #1
ShaunHill
New to the CF scene

 
Join Date: Feb 2013
Posts: 9
Thanks: 1
Thanked 0 Times in 0 Posts
ShaunHill is an unknown quantity at this point
Inserting a divider

I want a divider between each post on my news page (http://www.shaunhillphotography.co.uk/news/), like the one on http://pexeto.com/acoustic_wp/contact/

I have a valid installation of this theme, but it just didn't cut it. So I have been working with an alternative theme. However, I miss the above described feature and would like it reintroduced using the alternative theme.

I expect I will need to make a modification to a php file, so that the theme automatically inserts this divider between each news article automatically, along with inserting

.double-line {
width: 100%;
height: 1px;
display: block;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #f5f5f5;
font-size: 1px;
}

into the custom CSS file.

Does anyone know how I would go about doing this?
ShaunHill is offline   Reply With Quote
Old 02-19-2013, 06:10 PM   PM User | #2
Fou-Lu
God Emperor


 
Fou-Lu's Avatar
 
Join Date: Sep 2002
Location: Saskatoon, Saskatchewan
Posts: 15,653
Thanks: 4
Thanked 2,451 Times in 2,420 Posts
Fou-Lu is a name known to allFou-Lu is a name known to allFou-Lu is a name known to allFou-Lu is a name known to allFou-Lu is a name known to allFou-Lu is a name known to all
Without checking these links, I question the need for a PHP modification. CSS is very powerful; presuming that there is a logical division between each posting HTML wise, there is no reason why CSS cannot be used alone to change the rendering of these. Adding a class to the html will make it easier of course.
So in other words, I would suggest that this isn't a PHP issue, rather an HTML/CSS one. Is there anything in particular that I may be missing that indicates that this could be a PHP issue?
__________________
As of PHP 5.5, the MySQL library has been officially deprecated. It is recommended to move to either MySQLi or PDO libraries for your mysql connectivity. See here for help choosing which interface you prefer: http://php.net/manual/en/mysqlinfo.api.choosing.php
Fou-Lu is offline   Reply With Quote
Old 02-19-2013, 06:32 PM   PM User | #3
ShaunHill
New to the CF scene

 
Join Date: Feb 2013
Posts: 9
Thanks: 1
Thanked 0 Times in 0 Posts
ShaunHill is an unknown quantity at this point
Thank you very much for your reply. The reason I could see the need to make a modification to the PHP was because there was not an existing element I could refer the CSS to in order to place the divider in the right place as far as my experimenting showed.

The news page has no HTML as such, it is all created by wordpress and I couldn't see a way of inserting it because each article showing is part of an autogenerated list, as opposed to a static page which would otherwise make it possible.

Can you see a way?

Last edited by ShaunHill; 02-19-2013 at 06:34 PM..
ShaunHill is offline   Reply With Quote
Old 02-19-2013, 06:43 PM   PM User | #4
Fou-Lu
God Emperor


 
Fou-Lu's Avatar
 
Join Date: Sep 2002
Location: Saskatoon, Saskatchewan
Posts: 15,653
Thanks: 4
Thanked 2,451 Times in 2,420 Posts
Fou-Lu is a name known to allFou-Lu is a name known to allFou-Lu is a name known to allFou-Lu is a name known to allFou-Lu is a name known to allFou-Lu is a name known to all
Looks to me that you have several options available for class markup: post-{#'s} post type-post status-publish format-standard hentry category-news. Not sure if there's a particular one you're interested in, but I'd probably apply to category-news class.
__________________
As of PHP 5.5, the MySQL library has been officially deprecated. It is recommended to move to either MySQLi or PDO libraries for your mysql connectivity. See here for help choosing which interface you prefer: http://php.net/manual/en/mysqlinfo.api.choosing.php
Fou-Lu is offline   Reply With Quote
Old 02-20-2013, 08:19 AM   PM User | #5
ShaunHill
New to the CF scene

 
Join Date: Feb 2013
Posts: 9
Thanks: 1
Thanked 0 Times in 0 Posts
ShaunHill is an unknown quantity at this point
http://www.shaunhillphotography.co.uk/news/

.category-news{
width: 100%;
height: 1px;
display: block;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #f5f5f5;
font-size: 1px;
}

This really messes up the page, any idea how to sort it out?
ShaunHill is offline   Reply With Quote
Old 02-20-2013, 02:54 PM   PM User | #6
Rowsdower!
Senior Coder

 
Rowsdower!'s Avatar
 
Join Date: Oct 2008
Location: Some say it's everything.
Posts: 2,007
Thanks: 5
Thanked 395 Times in 388 Posts
Rowsdower! has a spectacular aura aboutRowsdower! has a spectacular aura aboutRowsdower! has a spectacular aura about
Quote:
Originally Posted by ShaunHill View Post
http://www.shaunhillphotography.co.uk/news/

.category-news{
width: 100%;
height: 1px;
display: block;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #f5f5f5;
font-size: 1px;
}

This really messes up the page, any idea how to sort it out?
Kill those highlighted lines. They are setting all of your category sections to 1px height and all of your contents to 1px font size. Frankly, you probably don't need the display:block; or width:100%; settings, either (haven't checked), but they at least aren't hurting anything.
__________________
The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
See Mediocrity in its Infancy
It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
Seek and you shall find... basically:
validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting
Rowsdower! is offline   Reply With Quote
Old 02-20-2013, 02:57 PM   PM User | #7
Fou-Lu
God Emperor


 
Fou-Lu's Avatar
 
Join Date: Sep 2002
Location: Saskatoon, Saskatchewan
Posts: 15,653
Thanks: 4
Thanked 2,451 Times in 2,420 Posts
Fou-Lu is a name known to allFou-Lu is a name known to allFou-Lu is a name known to allFou-Lu is a name known to allFou-Lu is a name known to allFou-Lu is a name known to all
Glad a client guy saved the day! I'm terrible with CSS. . .
Probably right about the display and width, these are in a div block anyway.

Looks like this is all HTML/CSS based, so I'm just going to move the thread there.
__________________
As of PHP 5.5, the MySQL library has been officially deprecated. It is recommended to move to either MySQLi or PDO libraries for your mysql connectivity. See here for help choosing which interface you prefer: http://php.net/manual/en/mysqlinfo.api.choosing.php
Fou-Lu is offline   Reply With Quote
Old 02-20-2013, 08:30 PM   PM User | #8
ShaunHill
New to the CF scene

 
Join Date: Feb 2013
Posts: 9
Thanks: 1
Thanked 0 Times in 0 Posts
ShaunHill is an unknown quantity at this point
Thank you for your replies. It's better, but the problem is that it displays at the top and bottom of posts, rather than between each post like a standard divider would do.

How can this be achieved?
ShaunHill is offline   Reply With Quote
Old 02-20-2013, 11:02 PM   PM User | #9
ShaunHill
New to the CF scene

 
Join Date: Feb 2013
Posts: 9
Thanks: 1
Thanked 0 Times in 0 Posts
ShaunHill is an unknown quantity at this point
Looking through the code using Firebug the options I have experimented with have not worked out as I have specified. I think this is why the thread was originally under PHP. I can't see a way of working this into the theme without editing/adding code to the PHP, but maybe one of you clever people can?
ShaunHill is offline   Reply With Quote
Old 02-21-2013, 01:18 PM   PM User | #10
Rowsdower!
Senior Coder

 
Rowsdower!'s Avatar
 
Join Date: Oct 2008
Location: Some say it's everything.
Posts: 2,007
Thanks: 5
Thanked 395 Times in 388 Posts
Rowsdower! has a spectacular aura aboutRowsdower! has a spectacular aura aboutRowsdower! has a spectacular aura about
Quote:
Originally Posted by ShaunHill View Post
Thank you for your replies. It's better, but the problem is that it displays at the top and bottom of posts, rather than between each post like a standard divider would do.

How can this be achieved?
Quote:
Originally Posted by ShaunHill View Post
Looking through the code using Firebug the options I have experimented with have not worked out as I have specified. I think this is why the thread was originally under PHP. I can't see a way of working this into the theme without editing/adding code to the PHP, but maybe one of you clever people can?
You have a top border and a bottom border both specified in your CSS. Logically, how would you expect this to display? How might you reduce the number of borders seen from 2 to 1?

This is most definitely not a PHP issue.
__________________
The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
See Mediocrity in its Infancy
It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
Seek and you shall find... basically:
validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting
Rowsdower! is offline   Reply With Quote
Old 02-21-2013, 02:27 PM   PM User | #11
ShaunHill
New to the CF scene

 
Join Date: Feb 2013
Posts: 9
Thanks: 1
Thanked 0 Times in 0 Posts
ShaunHill is an unknown quantity at this point
I don't know, how is it achieved on http://pexeto.com/acoustic_wp/blog/ ?
ShaunHill is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 04:07 PM.


Advertisement
Log in to turn off these ads.