WordPress.org

Support

[Resolved] background images

  • Hello there Matt, I have installed your wonderful plugin and I am quite eager to utilize it’s potential as an accordion to disply my main content. I am however having an issue applying background images to the seperate categories of such an accordion. My attempts have been through CSS with no success. JQueary is foreign to me at present and there might lie my problem. To the question; I’m I on the right track with applying the images through CSS providing I use the right selectors or is this a JQuery UI task? Or is it that all I need is a second shortcode plugin to assist in this matter?

    Thanks for you time and direction,

    Tan

    *here is the CSS I have been hacking about…

    .squelch-taas-override.squelch-taas-accordion .ui-accordion-header {
        margin: 20px 0 0 0;
        padding: 0 0 0 0;
        font-weight: bold;
        letter-spacing: 0;
        text-transform: none;
        font-size: 16px;
    }
    
    .squelch-taas-override.squelch-taas-accordion .ui-accordion-content {
    	margin: 10px 20px 2px 20px;
    	color: #FFF;
    }
    
    #ui-accordion-squelch-taas-accordion-0-panel-0 {
    	padding: 40px;
    }
    
    .ui-widget-content #ui-accordion-squelch-taas-accordion-0-panel-0 {
    	background-image:url(../images/'jasper.jpg');
    	border: 1px solid #fff;
    }

    http://wordpress.org/extend/plugins/squelch-tabs-and-accordions-shortcodes/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Matt Lowe

    @squelch

    Hi Tan,

    All styling is done with CSS and so

    .ui-widget-content #ui-accordion-squelch-taas-accordion-0-panel-0 {
    	background-image:url(../images/'jasper.jpg');
    	border: 1px solid #fff;
    }

    …should be…

    .ui-widget-content#ui-accordion-squelch-taas-accordion-0-panel-0 {
    	background-image:url(../images/jasper.jpg);
    	border: 1px solid #fff;
    }

    Although I recommend you actually use the Squelch TAAS override class for all styles, which would make the above into:

    .squelch-taas-override #ui-accordion-squelch-taas-accordion-0-panel-0 {
    	background-image:url(../images/jasper.jpg);
    	border: 1px solid #fff;
    }

    Hey Matt, isn’t it funny all we need sometimes is a littel nudge in the right direction. Thanks for the reminder about ‘.squelch-taas-override’. If it is not to much I have one other inquirey. Concerning my headache over trying to seperate the content text away from ‘bg’ image and it’s opacity. I’ve been messing around with #ui-accordion-squelch-taas-accordion-0-panel-0 and .squelch-taas-accordion-shortcode-content-0 with little luck. Should I try else where in the accordion’s code? Any tip is apperciated and thank you dearly for the help.

    Plugin Author Matt Lowe

    @squelch

    Hi Tan, I’m not sure I understand your question. What are you trying to achieve?

    Oh okay well what I was trying to communicate was that in each content section of my accordion there is text overlaying an image. I would like to have the text standout more against the image so I have been attempting to set a 50% opacity style to the image only. Though when I apply the code both the text and image are affected by the opacity setting in CSS. I’m sure you understand, the confusion for me is that I have tried the code under both the div.id and div.class mentioned above. I am coming to the conclusion that they are not seperate, that they share the same div. I suppsoe my qestion is, is the background at all seperate from the text? If so which selectors should I use, sorry for the noob questions, hard to put out there, I enjoy hacking about but you can only get so far sometimes. This is what I have in mind –

    thanks

    Hey Matt thanks again I figured it all out. Cheers

    Plugin Author Matt Lowe

    @squelch

    OK no problem, thanks for letting me know.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Resolved] background images’ is closed to new replies.
Skip to toolbar