image under menu

Frak_Lou_Elmo
Frak_Lou_Elmo

Hey all, I made a campaign of the month badge :)

can anyone tell me what css I need to haveit placed under the main menu on the right?

Cheers,

Frak



twitter: @Frak_Lou_Elmo

Comments

  • thaen
    thaen
    Posts: 953

    Can you give a sample doctored up screenshot?  I'm not following what you mean by "under the main menu on the right"?

    Obsidian Portal Developer

  • Frak_Lou_Elmo
    Frak_Lou_Elmo
    Posts: 173

    Oh. I don't know my right from my left apparently. yeah, over there!



    twitter: @Frak_Lou_Elmo

  • thaen
    thaen
    Posts: 953

    Haha!  I actually have real trouble telling left from right.  I know I'm left handed (because people notice/mention it), so when I want to know left from right, I have to literally stop and think "if I was going to write with a pencil, which hand would I use", and then that's "left", so the other hand is "right".  Sometimes, if I'm not totally sure, I have to actually pretend one finger on the other hand is a "pencil" and grab that finger as if I was going to write to see if it feels right.

    For your actual question, I'm going to give a half answer, and let someone else better with CSS/HTML skills, dress it up.

    I think most CotM winners put their badge only on one page, the Front Page, but it sounds like you want yours on every page.

    To do that, you can use the "Custom Navigation" feature, and put HTML to hold your badge at the bottom of the "NAVIGATION: CAMPAIGN SIDE" section, right before the "NAVIGATION: DASHBOARD SIDE" section starts.  You'll need some extra CSS to hide the badge when you're looking at the "dashboard side".

    Obsidian Portal Developer

  • gastoff
    gastoff
    Posts: 136

    Another way to add it under the navigation bar would be to add the image to the :after pseudo element. The only caveat here is that you have to set the content to be "" so that the element will be visible and you have to set the width and height:

     


    .campaign-public-layout #campaign-nav:after{
    content: "";
    background-image: url(your URL);
    background-size: 100%;
    background-repeat: no-repeat;
    display: inline-block;
    width: 100%;
    height: 110px; *height cannot be set using % and has to be given using px size*
    }

     

    image

  • thaen
    thaen
    Posts: 953

    @gastoff, that's a much better answer!

    Obsidian Portal Developer

Sign In or Register to comment.

August 2022
In Over Their Heads

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions