Eventbrite Single Event: pushing the logo to the right

  • Author
    Posts
  • #1504885

    annediam
    Member

    Hi guys,

    I’m trying to put the logo in the header to the right in the Eventbrite Single Event theme.
    Everything I’m trying in CSS does not work (seems like a lot of CSS customization options working in other themes are not available with the Eventbrite theme, it just does not respond).

    Do you have another magic CSS formula? I do not wish to move the entire header, I just want the text aligned on the left with the menus, and having the uploaded on the right.

    Thanks for your help!
    Anne

    The blog I need help with is medical-translators-conference.com.

    #1504981

    justpi
    Member

    One possibility:

    header .logo-row {
        display: block;
        text-align: right;
        width: 100%;
    }
    header .logo {
        display: inline;
    }
    header .logo img {
        margin: 0;
    }
    header .logo-text {
        float: left;
        margin-top: 24px;
    }

    A note on your background image:
    The theme is centered in relation to the browser window, so the left bg area doesn’t have a fixed width. Drag the browser window to make it narrower and see how it will look different to different visitors.

    #1504985

    annediam
    Member

    Hi! thanks a lot, worked perfectly ;)

    About the bg image: I know, it sucks… I’ve tried to make the theme itself transparent, like I did in another blog – see http://nytesyte.net/, where I used:

    body.custom-background {
    background-size: 450px 100%;
    }

    but the Eventbrite theme here doesn’t respond to this – which makes sense in a way because the Eventbrite info box will appear once the event itself is published on Eventbrite.
    I’m working on a new background design where this won’t happen anymore. The blog is still in early stages ;)

    Thanks again a million for your help!

    #1505028

    justpi
    Member

    You’re welcome.
    You can easily make the theme transparent, but I don’t think this is the best solution – at least not with the current bg image.

    #1505111

    annediam
    Member

    Yeah, transparency is a complex thing ;)
    How could I make it transparent (with another bg image) just in case?

    I tried
    #page {
    background: transparent;
    }
    Like I did on the other blog I mentioned above – not working with this Eventbrite theme (sorry, I pasted the wrong bit of CSS in my post above).

    Thanks and have a great weekend! ;)
    Anne

    #1505116

    justpi
    Member

    Each theme has its own structure and its own selectors, so a code that works on a theme won’t work on a different theme. To make the content area transparent you need this:

    .main-container .container {
    background-color: transparent;
    }

    Or maybe you can add a faint semi-transparent bg to it:

    .main-container .container {
    background-color: rgba(240, 240, 240, 0.7);
    }

    #1505131

    annediam
    Member

    I see – sorry, still a beginner in CSS, I just started training but only had 3 modules so far, so… ;)
    Thanks a lot – the faint semi-transparent bg is a brilliant idea. I went for that one using a background image taken from the actual logo. Looks much better on small screens too.

    Thanks again a million for your help!

    #1505134

    justpi
    Member

    You’re welcome!
    Yes, much better now: more elegant, and with this bg image it doesn’t matter where it shows or how much of it will show.

    #1505146

    annediam
    Member

    Yep, agreed!
    Sorry to bother again – I have a couple more questions actually :p

    If, say, I want to remove transparency for just one page (for example that one: http://medical-translators-conference.com/contact/contact-us/) – so make it plain, how do I do that in CSS (using the page ID I assume).

    How can I make the site title bigger/smaller? (not working in the Fonts menu, despite my cstom upgrade)
    And likewise, how do I make the subtitle bigger?

    Last but not least: is there a way I can chang the font of the site title only, without it changing all the headings as well?

    Thanks… and sorry p ;)

    #1505147

    justpi
    Member

    a) Yes, you use the page ID. But I’m nor sure what you mean by “remove transparency”. If you mean make the light grey rectangle fully opaque, add this:

    .page-id-61 .main-container .container {
    background-color: #F0F0F0;
    }

    If you mean eliminate the rectangle, write “transparent” in place of “#F0F0F0”.

    b) To change the font family of the blog title, and the font sizes of the title and the tagline, add this and change the font name and the values:

    header .logo-text h1 {
    font-family: Georgia !important;
    font-size: 3.5em !important;
    }
    header .logo-text h5 {
    font-size: 1.1em !important;
    }

    PS “Sorry”? This forum is for asking questions!

    #1505152

    annediam
    Member

    Well, yeah, but I hate to ask too much and stealing your time and skills! ;)
    Thanks a lot, it’s all working just fine – you rock! :)

The topic ‘Eventbrite Single Event: pushing the logo to the right’ is closed to new replies.