• Hi,
    I am building website on the lines of a magazine.
    I am playing around with some themes right now and though I haven’t decided on any particular theme like the mymag and traction themes so far.

    What I wanted to know is that most themes do offer different background colours but the background colour behind the text remains white in most case. Can I change that?
    https://demo.thethemefoundry.com/traction/ OR https://preview.wp-themix.org/ – this is what I mean when I say white background behind text.

    I wanted a creamy colour in the background to my text with any of the themes. I don’t HTML or CSS so will it possible to do it? Cans someone post the code or something for traction or mymag theme?

    Thanks

Viewing 15 replies - 1 through 15 (of 16 total)
  • Hi pon99,

    It is most likely possible to change the background color of the text. Since I don’t have any of those themes installed, I wouldn’t be able to tell you what CSS code you would have to change, but it’s probably not very complicated.
    Also, this is just my personal opinion, but if you want to try to make the best out of your blogging experience, I suggest you learn at least a little html and css. There are plenty of free tutorials out there, and will really save you down the line when (yeah, definitely when, and not so much if) you encounter a problem.
    I hope my opinion is helpful to you.

    Thread Starter pom99

    (@pom99)

    Thanks for your reply Marventus.
    I do realize the need for learning HTML and CSS but my bad luck here is that I am running a one man show here. I am primarily a journalist by occupation and am traveling around a lot these days gathering content for my site. Added to that the marketing and logo design and all are being handled by me. This is not meant to be an excuse but will have to try and dig out some time now for this too.

    Thanks all the same.

    Hi pom99,

    I know exactly what you mean: I too get a little overwhelmed sometimes with all that is required to run a relatively decent blog.

    Right now I’m under a pretty tight deadline (until 2 p.m. EST today), but if you can wait until then, I’ll try to install those 2 templates and analyze them see what code needs to be changed to modify the background and post the code modifications here.

    In the meantime, there are a couple of things you can start doing, if you have a little time:
    1. Make a list of the parts of each template where you would like to change the background color (so I can quickly identify them later);
    2. Let me know exactly what tone of beige you prefer. What you can do to figure this out is take a screen shot of each template (pressing “Print Screen” on your keyboard) and then paste into a new image in Photoshop (or similar software). From there, you can select the Paint Bucket tool and start trying out different colors. Once you’ve identified what color you want, just paste the RGB or web RGB values here. You can also try gradients if you like and know how to work with them, in which case you would have to post all the gradient color values.

    Have a great day!

    Thread Starter pom99

    (@pom99)

    That would be really so great of you Marventus. Thanks. Just came online.

    There is a slight change now. I was experimenting with the themes and now have more or less settled on matino theme which seems to be working fine so far with some slight eye sores for me. I have some queries which I have asked for help from the theme developers too. Hopefully they will reply.

    I will rewrite those queries here at the bottom. If its not too hard on you maybe you can help me out. If it becomes too much of a hassle then please feel free to tell me. Your offer for help is very kind enough.

    Its past 10 in the evening here now. I will get back to you soon with the details by tomorrow.

    Regards and thanks for your help.
    I had couple of queries as I am new to wordpress.

    1. How can I change SEARCH MY BLOG option to simply SEARCH ?

    2. Similarly how can I change SUBSCRIBE TO MY BLOG to simply Subscribe?

    3. I want to add more than one category to my FEATURED POSTS display. How can I do that? ( This is the biggest headache!)

    4. How can I remove BLOGROLL permanently and some of the ADs for the time being?

    5. How can I change the colour of the background behind my text to a cream colour? ( This one I will get back to you)
    Looking forward to hearing from you.

    Thanks

    Thread Starter pom99

    (@pom99)

    Hey can you give me any email ID where I can forward you the screenshots?

    Thanks

    Hi pom,

    Sorry I wasn’t able to get back to you sooner: today was one of those days, haha.
    Nice template you chose! It has a lot of very cool features and a very slick design.
    About your queries, here we go!

    1. Search bar:
    Open the file header.php located inside the matino root folder, find this piece of code:
    <p><span class="no-display">Search </span><input type="text" value="Search the blog" name="s" id="s" /><button type="submit"><span>Search</span></button></p>
    and change the value to “Search”. If you did it right, your code should look like this now:
    <p><span class="no-display">Search </span><input type="text" value="Search" name="s" id="s" /><button type="submit"><span>Search</span></button></p>

    2. Subscribe title:
    Inside the same file header.php, look for this line of code:
    <h2><span>Subscribe to My Blog</span></h2>
    and change it to:
    <h2><span>Subscribe</span></h2>

    3. Featured categories
    No can do here! The theme is designed to display only one category in the Featured Box. You can control which category is displayed from the WP admin panel –> Appeareance –> Themes –> Matino Options.
    However, there’s one thing you could try to do: you can have one main category called “Featured,” and add subcategories to that parent category. You would still end up with one parent cat, but a bunch of subcats through which you could organize your featured content.

    4. Sidebar Customization
    For some reason, the people who created the theme added certain features and/or WP widgets directly into the sidebar.php file, instead of just ‘registering’ the sidebar and allowing the user to customize it from the WP admin panel (at least, that’s how it appears in the version I downloaded). This means that, when you don’t add any widgets from the WP admin panel (Appearance –> Widgets), the theme displays fixed widgets or features in the sidebar; when you add widgets from the WP panel, it only displays the widgets you add (and not the fixed ones). So, if you want to get rid of certain widgets but not others, just add the ones you DO want to keep from the Widgets menu. If you don’t want to keep any of them, and don’t feel brave enough to do some code rewriting, haha, simply drag and drop a text widget (the one that is labeled “Arbitrary text or html”) into the Sidebar, leave the field “Title” blank, add a couple of spaces in the content field, and click “Save.” This way, you’re adding an invisible widget to the sidebar which will block the display of the fixed widgets contained in the sidebar.php file.

    Now, I’ve also noticed that the sidebar does not display when viewing posts. I can tell you how to display the sidebar in the posts too, so let me know if that’s something you would want.

    5. Background color:
    To change the background color, it is a little complicated and rather tedious, because all the content boxes are made of images (top, middle, and bottom). If you want to change the background colors, you have two options:
    1. Open each one of the background images located inside the template’s image folder (all the ones that start with bg) and photoshop them to change the color;
    2. Edit the file color.css located inside the template’s css folder, remove all the background:url([image_url] properties inside each selector, and add borders and color to each one, like so:

    border: 1px solid #ddd;
    background-color: beige;

    That code will add a light 1px grey border to each box and a beige background color. Whatever option you chose, you should know it is a pretty tedious job, and you have a pretty high chance of breaking stuff if you mess up.

    I hope all this info was helpful to you. Good luck with your site!

    Thread Starter pom99

    (@pom99)

    Hey was just about to send you the screen shots. Can’t seem to upload screen shots here.

    Thanks all the same. will go through your replies now.

    Thread Starter pom99

    (@pom99)

    I chose these values
    H 60 S 22 V 93 R 237 G 237 B 186

    HTML notation : ededba

    I was using GIMP.

    And yes I would like to see the sidebar when viewing the posts. Please tell me how to do that.

    thanks

    Thread Starter pom99

    (@pom99)

    Ok I am flooding you with questions. How can I increase the font size in the matino theme? I mean the text of the posts and the text displayed in the slider. The ABOUT US text near the footer is extra small and same goes for the copyright message. I tried browsing in the typography.css and layout.css . Couldn’t notice anyhting much. typography had lots of fonts and different sizes. Didn’t get it.

    Sorry for being such a pain.

    Thread Starter pom99

    (@pom99)

    Btw.. all your info worked. I am struggling with changing the background colour but other than that the other things worked like a charm. ?? Thanks a lot.

    Hi pom!
    Someone’s been busy! I’m really glad most of my answers worked for you. To be honest, I was afraid I hadn’t been clear enough, but obviously I was wrong.
    Sorry I didn’t get back to you sooner BTW: today was even crazier than yesterday. I actually have to step out again for a couple of hours, but I’ll look into the footer fonts and the sidebar in the posts when I get back.
    About the backgrounds, you can send me your screen shots to this address: f r a n d e a z e v e d o [at] g m a i l . c o m (just delete the spaces in between the letters and substitute [at] for the real at symbol: this is a pretty good technique to avoid spam BTW, hee hee), and I’ll try to take a look. However, I can’t make you any promises because, like I said, based on what I saw yesterday, it seems like a very tedious and delicate task because stuff might break, etc. But I’ll give it a shot and see what happens, ok?
    Gotta go! TTYL,

    M

    Hi again,

    I received your screen shots and I’ll get back to you on the backgrounds via e-mail.
    I wanted to post how to fix the footer texts and the sidebar in posts on the actual thread in case there are other people looking for these answers.

    1. Footer text:
    Your original intuition was correct: you need to modify typography.css to change the font sizes.
    Open this file, and locate the following code:

    div#footer div.footer-box div.footer-interior { font: normal 10px/20px 'Lucida Grande','Lucida Sans',serif; }
    div#footer div.footer-box div.footer-interior a { font: normal 10px/20px 'Lucida Grande','Lucida Sans',serif; text-decoration: none; }

    The code that interests us is: font: normal 10px/20px. You should know that the smaller value is controlling the size of normal texts (in paragraphs, or <p> tags), and the greater value is controlling the size of titles/headings (<h1>, <h2>, <h3>, etc. tags).
    So to change the size of the normal text, you need to increase the first value of 10px to whatever value you see fit (do it on both lines of code, of course).
    Personally, I would also change the color of the “Copyright” and “designed by” text, because it is too dark for the current background. To do so, open color.css, locate this code:

    div#footer-final { background: #000 url('../images/border-footer-final.gif') top center repeat-x; color: #1F1F1F; }
    div#footer-final a { color: #1F1F1F; }

    The first line of code is for regular text, the second one for links. Personally, I would use a lighter color, and use a different one for each kind of text. This should look significantly better:

    div#footer-final { background: #000 url('../images/border-footer-final.gif') top center repeat-x; color: #777; }
    div#footer-final a { color: #AAA; }

    Those two colors are slightly darker than the ones used for the previous subsection of the footer (where you have your Twitter, Recent Comments, and About us subsections). However, if you wish to use the exact same ones, use this code instead:

    div#footer-final { background: #000 url('../images/border-footer-final.gif') top center repeat-x; color: #999; }
    div#footer-final a { color: #CCC; }

    2. Sidebar in posts
    After taking a thorough look inside the file single.php, I realized the sidebar IS being loaded. The problem is that the file calls for a tweetmeme plugin or function on line 71 that breaks it if you don’t have it installed. I tried to search for a Twitter plugin that would prevent the template from triggering the error but I didn’t have any luck. The line in question is the following:
    <li class="icon-tweetmeme-mini"><?php echo tweetmeme(); ?></li>
    You can comment out the echo function for the time being until you find the appropriate plugin for this. Here’s how you do it:
    <li class="icon-tweetmeme-mini"><?php /*echo tweetmeme(); */?></li>

    I think this covers it all. Let me know if it works!

    Thread Starter pom99

    (@pom99)

    2. Sidebar in posts
    After taking a thorough look inside the file single.php, I realized the sidebar IS being loaded. The problem is that the file calls for a tweetmeme plugin or function on line 71 that breaks it if you don’t have it installed. I tried to search for a Twitter plugin that would prevent the template from triggering the error but I didn’t have any luck. The line in question is the following:
    <li class=”icon-tweetmeme-mini”><?php echo tweetmeme(); ?>
    You can comment out the echo function for the time being until you find the appropriate plugin for this. Here’s how you do it:
    <li class=”icon-tweetmeme-mini”><?php /*echo tweetmeme(); */?>

    Didn’t understand this. Sorry ?? What do you mean by ” cooment out the echo function”?

    Hey pom,

    Sorry I wasn’t clear enough about this: in coding, you have a way of introducing comments or text that is NOT picked up by the browser. These comments are often times used by programmers to ‘explain’ what a specific piece of code is doing. To ‘comment out’ a particular piece of coide means to turn it into a comment, thus ‘disabling’ it.
    If you compare both versions of that famous line 71 that I posted earlier, you will notice a /* symbol before and a */ symbol after the echo function.
    What you need to do is replace the 1st version of the code with the second one to disable that piece of code, and allow for the rest of the elements of the post template to load.

    Hope this is more clear. LMK!

    Thread Starter pom99

    (@pom99)

    Yup. thanks. But I am stuck with another problem now as I have let you know in the mail.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘need to change background colour behind text’ is closed to new replies.