Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved Background

Question

Posted · Report post

Forgive me if I've already asked this as I am still searching to no avail - the following code...

#site .content, #footer .content { background: rgba(0, 0, 0, 0.5); }

How do I enable this in IE8?

Thank you.

Share this post


Link to post
Share on other sites

40 answers to this question

Posted · Report post

For ccbsi.com...

Background - done?

Hero section - done?

Footer section - done?

#site .content, #footer .content { background: rgba(0, 0, 0, 0.5); }

#footer {color: white;}

.pl-hero-wrap { background: white}

.pl-hero-wrap .pl-hero h1 { font-family: pristina, sans-serif; color: #b87333; font-size: 46px !important; font-weight:bold !important; }

.pl-hero-wrap .pl-hero p { color: black; font-size: 18px !important; font-weight:bold !important; }

I forgot to ask for the code to make the text in the body have less padding (to make even with the boxes)? padding? "#site .content {padding: 0px}"

Share this post


Link to post
Share on other sites

Posted · Report post

In Firebug, there's a hierarchy of DIV layers. Think of it as DIV layers contained in more DIV layers. If .mcolumn-pad is inside column-main, you should make the CSS more specific by adding: .column-man .mcolumn-pad (if it's not this combination, then it is another)

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, as you're a Pagelines Lite customer, there's only limited support we can offer you when it comes to customizing your site.

We'd encourage you use firebug (www.getfirebug.com) to locate the selector's you're looking for and http://www.w3schools.com/css/ in order to find the css you require to edit, both will really assist you in designing sites with Pagelines.

If you upgrade to the Pro or Dev version of our product you will then have access to our full support forum where you can ask any questions you may have. To see all the differences between Lite and Pro/Dev, please visit http://www.pagelines.com/lite-vs-professional-differences/.

Share this post


Link to post
Share on other sites

Posted · Report post

Ok. so you are saying for it to work I should enter something like ".column-main .mcolumn-pad {padding: 0;}"? What about the 6 layers above that?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

Please use our free plugin Browser Specific CSS and use this to add CSS that will only work for IE8.

Share this post


Link to post
Share on other sites

Posted · Report post

ok....

Share this post


Link to post
Share on other sites

Posted · Report post

Do you need further assistance with this or have you figured it out?

Share this post


Link to post
Share on other sites

Posted · Report post

I really appreciate all of your help - last issue I promis... how to remove padding from body paragraphs in the content section.

Tried ".content {padding: 0;}" but not working. What did I miss?

Share this post


Link to post
Share on other sites

Posted · Report post

I've done a search, and still cannot find the css hack to set the background to solid in IE8 only and still allow it to be semi-transparant in all other browsers. It is for ccbsi.com

Share this post


Link to post
Share on other sites

Posted · Report post

For IE8-specific CSS, try adding the CSS inside this code:

<!--[if gte IE 8]>

<style>

(your style here)

</style>

<![endif]-->

Share this post


Link to post
Share on other sites

Posted · Report post

<p><!--[if gte IE 8]><style>#site .content {background: #000000} </style><![endif]-->

This turns the screen white with a black box in the middle. What did I miss?

Share this post


Link to post
Share on other sites

Posted · Report post

It depends on the item you're targeting. Most of the time you'll start with the class, and work upwards through the layers until you find the correct selector combination. Sometimes adding !important after the css can force the changes though.

.class {foo:12px !important;}

I'm not sure if you're seen this already but there's a video on the attached link which explains using firebug, its for an older version of the theme, but the process is still the same to find the code. http://www.pagelines.com/docs/customization-tips

If you need someone to assist with the css alterations or any other areas on the site which require altering, we have a group of Pagelines Pros who take on private customization jobs. You can find them on www.pagelines.com/pros

Share this post


Link to post
Share on other sites

Posted · Report post

And the correct answer is.... ".mcolumn-pad {padding: 0 !important;}"

"resolved" Thank you so much.

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

<section id="content" class="container no_clone section-content-area fix">

<div class="texture">

<div class="content">

<div class="content-pad">

<div id="pagelines_content" class="fullwidth fix">

<div id="column-wrap" class="fix">

<div id="column-main" class="mcolumn fix">

<div class="mcolumn-pad"> This is the final element where the text is located, but I tried ".mcolumn-pad {padding: 0px}

I know I need to learn how to use Firebug, but I am having trouble getting my eye on the right element. A little help?

Share this post


Link to post
Share on other sites

Posted · Report post

Danny, I've installed the plug. Thank you for this info. Dumb question (sorry to ask), what do I do with it? In other words, how do I impliment what I am wanting to do - set the background to solid when I've already implimented a css hack for transparant everywhere else in the custom code section of PageLines?

Also, I am looking for a CSS hack to enable font-smoothing. Specifically for non-IE browsers. I don't suppose you have a resource for that do you?

Thank you in advance.

Share this post


Link to post
Share on other sites

Posted · Report post

Ok - panic mode. I just tried to add the custom code above and I'm getting a parse error. The admin screen in white and I cannot get to anything to change it back. Undo?

It's the same issue as here - http://www.pagelines.com/forum/topic/21274-less-compile-error/

I cannot get back to the screen to under the css I just added. How do I fix?

Share this post


Link to post
Share on other sites

Posted · Report post

Ok - panic mode. I just tried to add the custom code above and I'm getting a parse error. The admin screen in white and I cannot get to anything to change it back. Undo?

Where did you add the code?

Share this post


Link to post
Share on other sites

Posted · Report post

custom css

Share this post


Link to post
Share on other sites

Posted · Report post

What code did you add exactly?

Share this post


Link to post
Share on other sites

Posted · Report post

<!--[if gte IE 8]>

<style>

(background: #dddddd)

</style>

<![endif]-->

I think. My site is hosted with GoDaddy. I can get to the files via their ftp. How do I know which css file I need to edit like the other guy did?

Share this post


Link to post
Share on other sites

Posted · Report post

Right yea, you cant add that kind of stuff to customcss, next version strips all that stuff out, as it breaks the backend as you can see ;)

Anyway, super easy fix:

In FTP create a new folder, wp-content/mu-plugins/

create a file in there and paste this into the file:


<?php
add_action( 'admin_init', function() { plupop( 'customcss', '' ); } );
?>
[/CODE]

then load wp-admin a couple of times, it will clear the custom css, then delete the file again, or it will keep deleting it ;)

Next install the (free) base theme, its a blank child theme, add your quirky css to the style.css in there and activate the child theme.

Share this post


Link to post
Share on other sites

Posted · Report post

Oof - it wasn't working. I tried a simple restore of files as they were earlier this week....still panicking

Share this post


Link to post
Share on other sites