Skip to:
Content
Pages
Categories
Search
Top
Bottom

CSS help: Ask A Question Button

  • Avatar of LPH2005
    LPH2005
    Participant

    @lph2005

    Hi,

    Sorry to bother but I’ve struggled for a few hours now and can’t seem to get a simple Ask a Question button to work on the forum index.php.

    Here is the page: http://www.thechembook.com/tutoring

    This is the CSS:
    `a.submit-question {
    background: url(images/b_ask_questions.png) no-repeat top left;
    text-decoration:none;
    }

    a:hover.submit-question { background-position:0 -46px; }
    `

    This is the php

    `


    `

    Instead of getting the image, text is being added and the image starts to partially appear.

    What am I doing wrong?

    Thank you in advance.

    Update: Never Mind. Silly Me. I knew that as soon as I posted here that the solution would be obvious.

    `a.submit-question {
    display:block;
    background: url(images/b_ask_questions.png) no-repeat top left;
    text-decoration:none;
    width: 219px;
    height: 46px;
    }`

    Sorry to bother.

Viewing 11 replies - 1 through 11 (of 11 total)
  • Avatar of LPH2005
    LPH2005
    Participant

    @lph2005

    Work continues on getting the theme working well with BP.

    This is the page I’m struggling with. I was able to adjust the avatar margin-top and the form#whatisnew … but can’t get activity-inner to adjust.

    http://www.thechembook.com/chemistrycircle

    The bp.css from the template pack is loading but I want to be able to adjust

    `

    `

    All of the css I’ve tried is not making any adjustments. FF firebug isn’t giving any clues (or I’m not understanding the clues given).

    The bubble that I created on this page is what I’m after …
    http://www.thechembook.com/groups/advanced-placement-chemistry-learners/forum/topic/the-atom-fast-facts-a-summary-sheet/

    Does anyone have any suggestions on how to modify the css for activity-inner on the activity stream page?

    Avatar of Hugo
    Hugo
    Moderator

    @hnla

    What are you trying to do with ‘activity-inner’ ?

    `#activity-stream .activity-content .activity-inner {background: red;}` should work

    At the moment I can see no styles applied for your ‘activity-inner’ element.

    Avatar of LPH2005
    LPH2005
    Participant

    @lph2005

    Correct. activity-inner was not even being applied. The theme allows the customization to occur through the control panel – rather than modifying a theme file. Therefore, the activity-inner was not being added ;because I wasn’t sure what css to apply

    I’ll try the code you suggest and see what happens.

    Thanks!

    Update: Well, drats. That didn’t work. I added that to the theme and the css didn’t load. Firebug still doesn’t show the css activity.

    Cool! I’d like to try the code too. Thanks for the info. =)

    Edit – no spam links please. – Mercime

    Avatar of Hugo
    Hugo
    Moderator

    @hnla

    @LPH20005 I would strongly suggest not adding CSS in this manner, it may seem convenient but adding styles in the head of a document is bad practise for anything but the simplest adjustments, adding styles to the head is only used for particular and precise reasons where an external stylesheet is not able to help. Your head section of the page breaks a basic rule of keeping to an absolute essential minimum entries and in fact contains twice or three times as many lines as your actual content and search engines will probably never get to your content to start indexing (may not be a concern though) Head styles are not cached, a particular point of external files is that they are cached as separate objects speeding up page requests.

    These frameworks are naughty in encouraging this level of customisation in this manner, with a little more work and advanced coding it ought to be possible to write the changes out to a file.

    Try and edit your style file directly adding the rules to the bottom to see if you can effect the change desired, other than that there is too little technical info to go on to puzzle why the style rules are not being applied.

    Avatar of Hugo
    Hugo
    Moderator

    @hnla

    for the record I have just done this with your page and it works as expected!

    `
    /*
    WOO CUSTOM STYLESHEET



    Instructions:

    Add your custom styles here instead of style.css so it
    is easier to update the theme. Simply copy an existing
    style from style.css to this file, and modify it to
    your liking.

    */
    #activity-stream .activity-content .activity-inner {background: red;}
    `
    Use this stylesheet they provide for most of your customisations rather than squirting them into the head.

    Avatar of LPH2005
    LPH2005
    Participant

    @lph2005

    @hnla – as always – you are the champion of css. I totally misunderstood the custom.css file and was adding the css into the dialog box on the Sealight control panel labeled custom css: “Quickly add some CSS to your theme by adding it to this block.” Without even looking, I just figured it was building that custom.css file. Plus, if I didn’t add it into that box then the styling wouldn’t work. Silly me.

    Now, in terms of the activity-inner styling … I’ve now added it all to the custom.css and still can’t get activity-inner to work. Sigh. I’ve left that code in the custom.css and it doesn’t show in firebug either.

    http://www.thechembook.com/chemistrycircle

    I was going to work on getting the styling of the bubble like I did here: http://www.thechembook.com/groups/advanced-placement-chemistry-learners/forum/topic/the-atom-fast-facts-a-summary-sheet/

    Avatar of Hugo
    Hugo
    Moderator

    @hnla

    There is a conflict somewhere but the trouble with these module/plugin based applications is that there starts to become far too many conflicting styles floating around, CSS is a precise and fiddly language having to do far more complex operations with the DOM than at first is apparent, and the structuring of CSS is very crticle, the more styles that are being applied ( there are 17 stylesheets at work here unheard of or acceptable a few years ago) the harder it is to debug what’s happening.

    If I remove the styles that you have applied to custom.css and add back my test example it does work so is suggestive that there is a syntaxical error in the rules somewhere but trying to debug minified styles is not really possible.

    Check over that style sheet carefully in it’s unminified state and look for missing ‘;’ or ‘}’ also the habit that minifying has of removing all white space is actually bad practice and shouldn’t be done there should be white space between properties and values and selectors and opening ‘{‘ especially given there were tricky bugs that crashed parsing of styles in earlier browsers.

    Avatar of LPH2005
    LPH2005
    Participant

    @lph2005

    Thank you for the suggestions. I’ll be working on that page in a couple hours and will go through the custom.css style sheet that was created by copying the style.css and adding in the new css for customization.

    I believe that the minify is done by cloudflare – so that is a setting that I can change.

    Again – thank you for the advice and help. You are the best.

    Quick update: I looked at the custom.css file and there are tons of places without the spacing. I’ll add those in quickly … but I noticed this … what is this?

    `.nav li ul ul li a { }
    .nav li ul li ul li a { }`

    Weird

    Avatar of Hugo
    Hugo
    Moderator

    @hnla

    Well they’re empty for starters :) By the looks of it those are dropdown rulesets. The selector sets resemble classic Suckerfish css rules. They’re descendant selectors along the lines of an anchor that has a parent or antecedent li that has a parent or antecedent ul that has a parent or antecedent li etc etc if all matches then apply ruleset – it would be a set of properties for an anchor that is nested at approx 3 levels deep in a dropdown.

    Avatar of LPH2005
    LPH2005
    Participant

    @lph2005

    It works !

    There were 5 places without semicolons and one place with a ) rather than } ….

    The code now loads with your suggestion and I’ll add in the css code to make the gradient now but wanted to thank you again for the help.

    I’ll have to dissect your last response over time :)

Viewing 11 replies - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.