Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   Help i want image as background on the category bar!! (http://forum.bytesforall.com/showthread.php?t=16421)

Crispuchita Jan 5, 2012 08:07 AM

Help i want image as background on the category bar!!
 
Hi everybody,

I'm new here so : Hi !!!
Ok my question I'm working the last few days with the Word press 3.3.1 and Atahualpa 3.7.3.
So far so good, i have my own background, header, background on the center column an sidebar.
Still i can't find where i can change some things so this are my questions:

1. I want to use a own background on the category bar and also change the background on the
hover.
Right now I can only use colours.
2. Can I made the center column and sidebar have the same sizes everywhere and scroll when the
text is larger than the sizes of both?

I have more questions but i want to begin with this two ;)

Thanks for helping me and kisses,

Crispuchita

lmilesw Jan 5, 2012 09:57 AM

1. This can be done with CSS using the selector for the menu
2. You can use CSS to give a height to the elements you want and then use the overflow:scroll property.

Crispuchita Jan 5, 2012 12:12 PM

Hi lmilesw,

thank you for your answer but do you mean the stylesheet or the css.php
Because my stylesheet i can't find it at all. I've searching but where is it?? my stylesheet looks like this now:

Code:

/*
Theme Name: Atahualpa
Theme URI: http://wordpress.bytesforall.com/
Description: Configure your custom theme: Fixed or flexible width layout, with min/max width, 0 - 4 sidebars, very browser safe (incl. IE6), create custom widget areas, import/export styles (several styles included), color pickers, over 200 options.
Version: 3.7.3
Author: BytesForAll
Author URI: http://forum.bytesforall.com/
Tags: white, one-column, two-columns, three-columns, four-columns, fixed-width, flexible-width, custom-colors, custom-header, theme-options, left-sidebar, right-sidebar, threaded-comments, sticky-post, translation-ready
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
 
.aligncenter {
        display: block;
        margin-left: auto;
        margin-right: auto;
        }

.alignleft {
        float: left;
        }

.alignright {
        float: right;
        }

.wp-caption {
        background: #f1f1f1;
        line-height: 18px;
        margin-bottom: 20px;
        padding: 4px;
        text-align: center;
}
       
.wp-caption-text {
        color: #888;
        font-size: 12px;
        margin: 5px;
        }
       
.gallery-caption {
        color: #888;
        font-size: 12px;
        margin: 0 0 12px;
        }

.sticky {
        font-weight: normal;
}

.bypostauthor {
        font-weight: normal;
}

Please help :S

Thanks Cris

lmilesw Jan 5, 2012 12:26 PM

You don't need to, or in my estimation want to, modify any theme files. If you do and modifications will not survive a theme upgrade.

All the CSS can go in the theme options. Some areas have there own option CSS boxes and some you would put in ATO>Add HTML/CSS Inserts>CSS Inserts.

Then to backup your options you can export them via Export/Import Settings in the theme options.

Crispuchita Jan 5, 2012 01:14 PM

Thanks again for your answer lmilesw !!
I didn't saw on the atahualpa options that :o

i got this now and it's alsmost working, the problem is now that if i go with the mouse over the category he doesn't the image, here the code:
Code:

div#menu2 ul.rMenu {
    background-image: url("http://www.driemeubelambachten.com./wordpress/wp-content/themes/atahualpa/images/bar2012jpg.jpg");
    background-position: 100%;
    background-repeat: repeat;
    height: 24px

}

div#menu2 ul.rMenu li {
    background-image: url("http://www.driemeubelambachten.com./wordpress/wp-content/themes/atahualpa/images/bar2012-2jpg.jpg");
    background-position: 100%;
    background-repeat: repeat;

}
div#menu2 ul.rMenu li a{
    background-image: url("http://www.driemeubelambachten.com./wordpress/wp-content/themes/atahualpa/images/bar2012jpg.jpg");
    background-position: 100%;
    background-repeat: repeat;

}

THANK THANK THANK YOUUUUUU

juggledad Jan 5, 2012 04:43 PM

for mouse over you need '... a:hover'

swimflyfast2 Jan 5, 2012 09:06 PM

1 Attachment(s)
Do you have any idea how can i get the background blocks that show up to disapear so I can lay menu text on top of this image? See attachment.

Code in Inserts:
HTML Code:

/*  THIS IS THE BLUE MENU BAR
div#menu1 ul.rMenu {

    background-image: url("http://www.online.rssupplyllc.com/images/menu1-blue.jpg");
    background-position: 100%;
    background-repeat: no-repeat;
    height: 47px
}
*/

I changed the jpg so that is is solid color to match the background color of the menu item and that works but I'd rather have the text lay on top with rectangle transparent as shown in test site. test site here

lmilesw Jan 5, 2012 09:26 PM

Set them to transparent in CSS Inserts. You MAY have to add !important to the CSS though. Not sure of the selector but you can get that with Firebug.

Crispuchita Jan 6, 2012 12:36 AM

Thank guys!!!

Of course i needed a:hover, silly me :p
I also get the overflow:scroll, but i must confess i don't like the colour and i know the firefox doesn't changing the colours of the overflow so maybe i will change that back.

I saw in the site of swimflyfast2 that he or she has an icon on the widgets menu, can i change that also in the atahualpa options??

And btw @swimflyfast2 is looking good your site ;)

Again guys thanks !!!!

swimflyfast2 Jan 6, 2012 07:32 AM

I'm going to start a new thread ...


All times are GMT -6. The time now is 12:33 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.