WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
How to change bg in pages and articles (15 posts)

  1. roccopanetta
    Member
    Posted 1 month ago #

    Hi all,
    I've searched for it in the forum but I can't find an answer. If already exist please link it to me!

    I learned how to change the theme background but i would like to set it as defalut background in pages and articles too.
    Atm they look white.
    Can you help me?
    ty

  2. acub
    Member
    Posted 1 month ago #

    Please provide a link to your website, so I can have a look at the mods you already made.

  3. roccopanetta
    Member
    Posted 1 month ago #

    http://birragladium.altervista.org

    ty so much.
    p.s. atm i took off the backgroung image

  4. roccopanetta
    Member
    Posted 1 month ago #

    ok.. now there is a gold background so you can see what is white and what is gold istantly (I know you don't need it!) :)

  5. acub
    Member
    Posted 1 month ago #

    The code you're after is

    #main-wrapper {
    	background-color: X;
    }
    #main-wrapper .round-div {
    	border-color: X;
    }

    where X can have any valid CSS colour value.

    The first rule changes the background-color of #main-wrapper while the second changes the border color of the round images that zoom in on hover. Unfortunately, while background-color property accepts a value of transparent, border-color does not. This basically means you cannot have the zoom-in effect on those images unless your background has an uniform colour.

    As an example, here's set of colour tweaks that might work in your case:

    h1, h2, h3, h4, h5, h6 {
    text-shadow: 0px 1px 0px rgba(255,255,255,.65);
    }
    #main-wrapper {
    	background-color: #e4d8a9;
    }
    #main-wrapper .round-div {
    	border-color: #e4d8a9;
    }
    .tc-header {
    	border-bottom: 7px solid #e4d8a9;
    }
    hr {
    	border-top: 1px solid rgba(0,0,0,.17);
    	border-bottom: 1px solid rgba(255,255,255,.42);
    }
  6. roccopanetta
    Member
    Posted 1 month ago #

    Ty mate.. you helped me a lot!

  7. acub
    Member
    Posted 1 month ago #

    You're welcome, mate.
    I like what you did with it. But that menu is a touch too light for my taste. Give these colors a spin (add it to the existing CSS) and let me know what you think (note: make sure you select all the code, not just the visible part):

    .social-block a {
    	text-shadow: none;
    }
    .navbar div.navbar-inner {
    	background: rgba(26, 26, 23, 0.55);
    	box-shadow: -12px 12px 120px rgba(243, 234, 125, 0.15),
    			-2px 2px 7px rgba(255,255,128,.12),
    			inset 0 0 60px rgba(0,0,0,.65);
    	border: 1px solid rgba(255, 240, 155, 0.21);
    	border-radius: 0;
    	}
    .navbar .nav li.dropdown.open > .dropdown-toggle,
    .navbar .nav li.dropdown.active > .dropdown-toggle,
    .navbar .nav li.dropdown.open.active > .dropdown-toggle,
    .nav-collapse.collapse {
    	background: #212121;
    	color: #e9a825;
    	}
    .navbar .nav > li > a {
    	text-shadow: none;
    	}
    .dropdown-menu > li > a {
    	color: #ccc;
    	}
    .dropdown-menu {
    	background: #212121;
    	}
    .dropdown-menu > li > a:hover,
    .dropdown-menu > li > a:focus,
    .dropdown-submenu:hover > a,
    .dropdown-submenu:focus > a,
    .nav-collapse .nav > li > a:hover,
    .nav-collapse .nav > li > a:focus,
    .nav-collapse .dropdown-menu a:hover,
    .nav-collapse .dropdown-menu a:focus {
    	background: rgba(255, 240, 155,.07);
    	color: #e9a825;
    	}
    .navbar .nav > li > .dropdown-menu:after {
    	border-bottom: 6px solid #212121;
    	}
    .navbar .nav > li > .dropdown-menu:before {
    	border-bottom: 7px solid #444;
    	}

    You might also want to add an inline style of

    background: rgba(33, 33, 33, 0.76);

    to that footer center.

  8. acub
    Member
    Posted 1 month ago #

    I played a bit more with the code and I think that yellow light would look better if it was more powerful. You might want to replace the box-shadow for .navbar div.navbar-inner in the code above with:

    box-shadow:	-12px 12px 100px 10px rgba(243, 234, 125, 0.15),
    		-2px 2px 7px 1px rgba(255,255,128,.12),
    		inset 0 0 60px 10px rgba(0,0,0,.65);

    if you agree with me and like the effect.

    I hope I'm not being too intrusive.

  9. roccopanetta
    Member
    Posted 1 month ago #

    too intrusive? It is a joke?
    I have to thank you for all the time wasted on that site :-)

    I put almost everything.. all in the custom css in customiz it..

    this is what I have atm:

    header.tc-header {
    /* Adjust the Image location 'wp-content/uploads/NAMEOFFILE.png' */
    background:     url(/wp-content/uploads/Wallscuro.jpg) repeat 0 0;
    }
    
    footer#footer .colophon {
    /* Adjust the Image location 'wp-content/uploads/NAMEOFFILE.png' */
    background:     url(/wp-content/uploads/Wallscuro.jpg) repeat 0 0  ;
    }
    
    h1, h2, h3, h4, h5, h6 {
    text-shadow: 0px 1px 0px rgba(255,255,255,.65);
    }
    #main-wrapper {
    	background-color: #e4d8a9;
    }
    #main-wrapper .round-div {
    	border-color: #e4d8a9;
    }
    .tc-header {
    	border-bottom: 7px solid #e4d8a9;
    }
    hr {
    	border-top: 1px solid rgba(0,0,0,.17);
    	border-bottom: 1px solid rgba(255,255,255,.42);
    }
    
    body {
    /* Adjust the Image location 'wp-content/uploads/NAMEOFFILE.png' */
    background:     url(/wp-content/uploads/Wallscuro.jpg) repeat 0 0  ;
    }
    /* Set the color (#e4d8a9) of the internal body */
    #main-wrapper {
    background-color: #e4d8a9;
    margin-top:     0px ;
    margin-bottom:  0px;
    }
    
    .social-block a {
    	text-shadow: none;
    }
    .navbar div.navbar-inner {
    	background: rgba(26, 26, 23, 0.55);
    	box-shadow:	-12px 12px 100px 10px rgba(243, 234, 125, 0.15),
    		-2px 2px 7px 1px rgba(255,255,128,.12),
    		inset 0 0 60px 10px rgba(0,0,0,.65);
    	border: 1px solid rgba(255, 240, 155, 0.21);
    	border-radius: 0;
    	}
    .navbar .nav li.dropdown.open > .dropdown-toggle,
    .navbar .nav li.dropdown.active > .dropdown-toggle,
    .navbar .nav li.dropdown.open.active > .dropdown-toggle,
    .nav-collapse.collapse {
    	background: #212121;
    	color: #e9a825;
    	}
    .navbar .nav > li > a {
    	text-shadow: none;
    	}
    .dropdown-menu > li > a {
    	color: #ccc;
    	}
    .dropdown-menu {
    	background: #212121;
    	}
    .dropdown-menu > li > a:hover,
    .dropdown-menu > li > a:focus,
    .dropdown-submenu:hover > a,
    .dropdown-submenu:focus > a,
    .nav-collapse .nav > li > a:hover,
    .nav-collapse .nav > li > a:focus,
    .nav-collapse .dropdown-menu a:hover,
    .nav-collapse .dropdown-menu a:focus {
    	background: rgba(255, 240, 155,.07);
    	color: #e9a825;
    	}
    .navbar .nav > li > .dropdown-menu:after {
    	border-bottom: 6px solid #212121;
    	}
    .navbar .nav > li > .dropdown-menu:before {
    	border-bottom: 7px solid #444;
    	}

    I have to change the footer color .. but..
    I don't like that kind of yellow in the posts/pages..
    don't you think it could be better? Probably same as you used?

    Can you remove that strange symbol in pages, beside the title too?

    Ty so much mate!

  10. deputy05
    Member
    Posted 1 month ago #

    I apologize if I am interfering with acub's help...

    For the page icon next to the title, try this:
    .page .entry-title.format-icon:before { display: none; }

    I have also looked at your site...really like what you are doing...if you do not like the yellow text over the gold background, you could try a deep purple or bluish-purple as these are complementary colors to gold...just a thought, I do not mean to intrude, either.

  11. acub
    Member
    Posted 1 month ago #

    From what I see, the yellow texts color is added inline, and that is wrong. For example, in http://birragladium.altervista.org/symphony/, at the bottom, you have

    <span style="font-weight: bold;"><span class="color_5" style="color: #ffcb05;">Temp. di Serv. 10 °C</span></span>

    That styling is directly editable from the page/post contents but is not not advisable. You should remove all inline styling and rely on CSS to style your contents via classes. For example, normally the text above should be changed to

    <span class="color_5"><strong>Temp. di Serv. 10 °C</strong></span>

    And now you have control over it from style.css, using:

    .color_5 { color: #968F6F; }

    If all your color_5 spans are bold, you can remove the <strong> tag and just add "font-weight: bold;" to the CSS and it will apply to all the spans with a class of color_5.

    In order to change the footer background color, you need to go into your footer.php (I assume) or wherever you added that <center> tag that holds your footer text. You either add a class to it (<center class="footer-class"> and than you have control over it from style.css, with

    .footer-class { background-color: #212121; }

    or you can just add the style inline: <center style="background-color: #212121;"> (not recommended, because it is harder to modify. If you add classes, you can change all the styles of your website from a single place: style.css). Besides, it will change the style for every place where you have that class, but if you add style inline you need to go in every place and change them. Not having to do that is why CSS was invented :).

  12. acub
    Member
    Posted 1 month ago #

    One more thing, you need to add this to your CSS aswell, I forgot to also change the ".current-menu-item > a" and ".current-menu-ancestor > a" css and it now shows up white (from the default menu css):

    .dropdown-menu > li.current-menu-item > a,
    .dropdown-menu > li.current-menu-ancestor > a {
    	background: transparent;
    	}
  13. roccopanetta
    Member
    Posted 1 month ago #

    This is not a help.. this is a lesson: I think I'll have to pay you! :-)

    I forgot to say it before: sorry for my poor english, I hope you understand what I write (I am italian).

    You are right: I've changed the inline code somewhere. Usually, in others templates, I can see the css totally but here I don't. In those cases I make my changes to the original css but I don't have the skill to write a custom css like you are doing.

    I cannot still remove that symbol beside the title: i really hate it.
    I've tried using firebug to locate it but it looks I am not able :)

    Anyway, I still don't like that yellow in posts and pages.. I will try to make changes the way you told me.
    I'll never finish to thank you!

  14. roccopanetta
    Member
    Posted 1 month ago #

    ..and I would like to change the post and page font size from 14px to 20px.. and.. obiviusly.. I cannot :/

  15. acub
    Member
    Posted 1 month ago #

    I am not a big fan of proving people wrong, but I think you have the skill to write a custom css. You just don't have the knowledge. The principle is very simple: instead of putting style="/* some css here */" you only put class="put-a-class-name-here".

    Than you open style.css and you write at the end:

    .put-a-class-name-here {
    	/* some css here */
    }

    Now, my wild guess is that you are using Visual editor when you are editing your pages and posts. I strongly advice you not to, as you do not see the html tags and you have very limited control over them. Use the Text tab you will see all tags. For example, this is a piece of your page code:

    <p class="font_8" style="color: #ffffff;"><span style="color: #000000;"><span style="font-weight: bold;"><span class="color_5">BICCHIERE:</span></span> Balloon </span></p>

    The code above says:

    <paragraph>
    	<make this white and class "font_8">
    		<make this black>
    			<make this bold>
    				<this has class of "color_5">
    					BICCHIERE:
    				<no more class of "color5">
    			</no more bold>
    			Balloon
    		<no more black>
    	<no more white and class "font_8">
    <end of paragraph>

    Normally, it should only be:

    <paragraph>
    	<this has class of "color_5">
    		BICCHIERE:
    	<no more class of "color_5">
    	Balloon
    <end of paragraph>

    Translated in html:

    <p><span class="color_5">BICCHIERE:</span> Balloon</p>

    And, in your style.css:

    .color_5 {
    	font-weight: bold; /* make it bold */
    	color: #000000; /* make it black */
    }

    Now, every element that has the class of color_5 will be black and bold, unless some stronger CSS rules apply to it, overriding font-weight or color.

    These are the basics of CSS. The rest is here.

    Good luck :)

Reply

You must log in to post.

About this Theme

About this Topic