Need help? Check out our Support site, then


Eventbrite Single Event: pushing the logo to the right

  1. 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.

  2. 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.

  3. 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!

  4. 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.

  5. 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

  6. 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);
    }
  7. 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!

  8. 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.

  9. 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 ;)

  10. 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!

  11. 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! :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.