Modern Portfolio Pro theme site header logo

[unklee]

The Modern Portfolio Pro theme has a small logo (a simple M in a circle) next to the title. Using the standard Header Image option replaces the title with the logo, but this appears to have added the logo to the title.

How is this done? Does anybody know please? Looking at the code in my browser doesn't give me any clues.

Thanks.

http://my.studiopress.com/themes/modern-portfolio/#demo-full

[Victor Font]

The M is done in CSS using the link's "before" pseudo element.

.site-title a::before {
    content: "M";
}
.site-title a::before {
    background-color: #222;
    border-radius: 50%;
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    font-family: "Merriweather",serif;
    height: 48px;
    line-height: 2.1;
    margin-right: 12px;
    padding: 3px 4px;
    text-align: center;
    width: 48px;
    text-transform: uppercase;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[unklee]

Hi Victor, thanks so much. That is very cool. There is so much to know in CSS. I've never used "before" before, but you've set it out very clearly, thanks.

I was even able to change the content line to:

content: url('http:xxxxxxx.jpg') and put a graphic in there if I want that. Thanks again.

[unklee]

I wonder, Victor Font, if you are still reading this, and can help me style this please. I have inserted a graphic using the method you showed me, but both graphic and title align at the bottom, whereas I'd like them to centre align. I can't for the life of me find the CSS to do this. Are you or anyone able to give me a clue please? Thanks.

[susanta]

Hey Unklee, if you can share the link to you site, maybe I can try to help you. Thanks

[unklee]

Hi Susanta, if you could help, that would be great. The URL is http://www.is-there-a-god.info. As you can see, the lighthouse graphic in the circle bottom-aligns with the title text, when I think it would look better if it centre aligned.

(The original where I saw this effect was Modern Portfolio theme, but mine is, of course, Minimum Pro theme.)

[Genesis Developer]

Replace your existing CSS with this once

.site-title a::before {
    background: url("http://www.is-there-a-god.info/blog/wp-content/uploads/2016/01/lighthouse-logo.png") no-repeat scroll 0 0;
    content: "";
    display: inline-block;
    height: 50px;
    margin-right: 12px;
    position: relative;
    top: 11px;
    width: 50px;
}

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[unklee]

Hey, that did the trick, thanks heaps!

I'm wondering what the lesson is for me there. Like what does the content:""; do? And why is position:relative; necessary? I'll ponder some more.

Thanks again, it is just a small thing but it looks better now.

[Author]

Posts