Jump to content
Sign in to follow this  
kneops

Having trouble with IMG styles

Recommended Posts

kneops

I use the Web Developer Toolbar a lot, but this time I can't find the right way to style all the images the same way, in the content, in the sidebar and the post thumbs.

 

As you can see here, the images on the left have the standard borders that I like: http://www.jessicartistic.com/nieuws/

 

Clicking on one of those images you will see the images inside the posts don't have that style, and the images in the sidebar are also without borders and shadow.

 

The developer toolbar directs me to a long list of styles that I copied and pasted in other places, but without succes. Is there an easier way to get all images in the site the same style, then please tell me. Best would be one place for general styling like border and shadow.

Share this post


Link to post
Share on other sites
James B

Hi there,

 

The images on the left of your page are the post loop thumbs, they've been styled with css in the core to display the post thumbnails with the border effect.

 

Other images you place on the site won't automatically get that style unfortunately. However, you will be able to apply the same css code used on the post thumbs to the other areas in the site, but you'll need to do this manually via the custom code box in Pagelines>site options>custom code.

 

The code for the border is

 

{

    backgroundnone repeat scroll 0 0 #E9E9E9;
    border1px solid #F4F4F4;
    box-shadow0 1px 2px rgba(0, 0, 0, 0.4);
}
 
You'll need to put the relevant selectors in front of that code so it applies the shadow/border to the other images as well. The find what the classes/id's of the other images on the site you'll need to use a web developer tool like firebug or the inbuilt tools inside chrome. An overview of finding and editing css inside the framework can be found at http://support.pagelines.me/docs/customization/custom-css/

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
kneops

Thanks very much for the explanation. Perhaps an idea for the future that global things like this can be controlled through the site settings, just like the Simple CSS Lite plugin does for colors, but then for images / bullets etc. That would be my next question, because I'm also not able to change the list style of the items on the left. Now they have none, but even when I add this code inside style.css or inside the Custom Code window, nothing happens.

 

ul#recent-posts-2 { list-style:circle !important; }

 

I tried all variations, like circle inside, square outside etc. nothing works. I use the right selector because for now I added a simple horizontal line before the list items using :before.

Share this post


Link to post
Share on other sites
Rob

Such a thing shouldn't be handled by settings as this will create too much confusion for clients.  Which method would be the default? Bordered, unbordered, shadowed, etc. as all have different looks and purposes?  Not everyone wants a border, shadow or other styling and just want a clean image in their post.  WordPress will create a border if you add a description to the image in a post or page, so there's no need to add settings.

 

The purpose of our Custom Code area is to allow people to individualize their sites their way, not in a rigid, structured manner, which is what settings essentially create. Sure, it's very easy to check this box, select that option, and so on from settings panels, but did you know you can have 20 minimal settings just for a simple block of text?  Add up all the variables possible and it could take you a month to go through every fixed setting, rather than minutes to drop in some custom code.  Keep in mind too, settings will apply globally, while custom CSS can be very specific.  So if you only want a block of text formatted a particular way on one page, you can do that with custom CSS, but not settings.

 

If you could do settings on a page by page basis, we'd have over 250 panels of options for every single page for you to go through. Even then, I assure you, someone will still want customized options.  Settings are great in their basic formats and for fundamental global purposes, but when you get down to things like how an image should be formatted in a post or page, that should be the decision and under the specific control of each designer or site owner.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
kneops

I understand. :) It's just that throughout all the sites I build, images all have the same styling, or no styling. Usually that would be one of the first global styles I would add to my stylesheet, and now I have been searching some time to find how and where to override the default PL styles.

 

Any idea then why I can't get that list-style changed?

Share this post


Link to post
Share on other sites
Rob

Since images can be placed in numerous places and each has its own CSS element, we recommend using Firebug for Firefox or Chrome's Inspection Tool to find the proper element.

 

It would seem you're not using a CSS element that PageLines recognizes.  If you use Firebug or Chrome's tools, you will be able to find the proper element, test it, then copy the corrected code to Dashboard > PageLines > Site Options > Custom Code.  I'm not sure which "style.css" you referred to, but please do not edit the core files. We don't support that.  A style.css is available in child themes or in the PageLines Customize plugin, both of which are editable.  The core files are subject to overwriting when PageLines updates or upgrades. All changes made to the core files will be overwritten.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
kneops

I'm using the child theme option style.css. But putting the code in the Custom Code window (the Customize plugin) also doesn't work.

 

ul#recentcomments {
list-style:disc inside !important;
}

 

That selector must be ok, because this is the html: http://img90.imageshack.us/i/selectie054.png/

 

I don't edit the core files.

Share this post


Link to post
Share on other sites
Rob

Can you provide a link to the site or page/post where this problem exists?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob

As James correctly pointed out, you have to put the proper prefix for each element.

#postloop .entry_content img {
    background: none repeat scroll 0 0 #E9E9E9;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    float: right;
    margin: 0 0 20px 20px;
}

You need to use the inspection tools, then apply the cord properly to achieve your desired results.  Add the code to Dashboard > PageLines > Site Options > Custom Code


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob

Since someone added this code (below), it's unlikely you will get alternative code to work:

#sidebar-wrap li ul li:before {
    content: "- ";
}

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
kneops

I added that myself as a temporary solution. I removed it for now, but that doesn't help. I still can't get that list to work :(

Share this post


Link to post
Share on other sites
Rob

Hi,

 

I'm sorry about the confusion. 

1. I'd recommend adding a unique class to each li so that you can apply the desired bullet to the individual list item. By applying a unique class to each item, you can insure the

2. Check http://www.w3schools.com/cssref/pr_list-style-type.asp for a list of options.

3  The CSS code below is too generic, and will apply to any list item in a sidebar, including the titles of lists. 
 
#sidebar-wrap #sb_primary .widget-pad {
}
 
If your <li> tag is written as <li class="mydisc"> .  Then, you just apply your CSS to
.mydisc {list-style: disc inside !important;}
 
Please note, disc is the default, filled circle for the UL level.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×