Modern Blogger Pro Customization

[hellorockview]

I'm working on customizing the Modern Blogger Pro theme and had a few questions if anyone could help.

1) My header includes an image I created, as well as an email subscription form. I want to make a new header, but I'm not sure what sizes I should make it. I need the ideal sizes for both desktop and mobile. I've never gotten mobile to look quite right and I've always just guessed at sizes.

2) Right now, the default fonts are set for the site. How do I change these?

3) Does anyone know the color codes for the teal and pink theme?

Thanks! 🙂

http://www.thehautenotes.com

[Davinder Singh Kainth]

1. Since you have email box on right side, current header image size looks ok. For mobile view, ideally logo / header image width should be between 250px - 300px (I personally keep it to maximum 250px).

2. Look for font name in functions.php file. Once you change font name there, you need to make corresponding changes in style.css file.

3. Following part of style.css file has pink and teal theme style code. For example, link color in this theme is #ff8584

/* Teal & Pink
---------------- */

body.theme-tealpink  {
	background: #fff url('images/chevron.png') fixed repeat;
}

.theme-tealpink .entry-meta a {
	color: #ff8584;
}

.theme-tealpink button,
.theme-tealpink input[type="button"],
.theme-tealpink input[type="reset"],
.theme-tealpink input[type="submit"] {
	background: #ff8584;
}

.theme-tealpink button:hover,
.theme-tealpink input:hover[type="button"],
.theme-tealpink input:hover[type="reset"],
.theme-tealpink input:hover[type="submit"] { 
	background: #2cb1a3;
}

.theme-tealpink #respond label {
	color: #ff8584;

If you need professional help in customizing theme quickly, reach me at iguiding AT gmail DOT com

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[AnitaC]

I've worked with the Modern Blogger Pro responsive headers for several clients and one developer. Email me on my website. I have some code I can share with an explanation of why it works this way. It's really different for every website as the headers/logos will be different for everyone.

---

Need help with customization or troubleshooting? Reach out to me.

[hellorockview]

Thanks for the help! I don't know how I missed those color codes. I went through everything and every single code I found was for another version of the theme.

[Susan]

I went through everything and every single code I found was for another version of the theme.

Make sure that you are reading the correct set up instructions. In your download area are the set-up instructions for the Modern Blogger Pro theme. Read those, and not the set-up for Modern Blogger.

[hellorockview]

Thanks for the tip, Susan!

When I was searching for the color codes, I kept finding other colors and not the ones I was looking for. Glad I got that all sorted now though!

When changing the site's fonts, do I need to add the new font to the zip file first or something? I assume I can't just go in and input another font name. I haven't tried changing this yet.

[Susan]

If you are adding a Google font, you can just add the code into your CSS; otherwise, you will need to add the font into either your zip file, or a folder in your theme's folder on your hosting site.

~ Susan
Pretty Darn Cute Design theme support

[hellorockview]

Susan, thank you so much for your help. It's greatly appreciated.

If anyone has a moment, could someone let me know what my favicon shows up as? I used a favicon plugin and changed it to a teal dot. This is what I see in both Chrome and Firefox. However, it doesn't register in Chrome on my phone. It also does not show up on the site itself in Safari, instead it shows the Genesis "G." My favicon only shows up when I'm on the WordPress dashboard on Safari. I'm not sure how to go into the zip file to change this.

[rihannsu]

I'm looking to change the lobster font on my post titles. I love it on the front page, but it's difficult to read for post and page titles. I can't find "Lobster" listed in "Theme Functions," but I found it in my Stylesheet folder. Should I be concerned about this, or has there been an update since the original replies, and I can disregard making a change in "Theme Functions?"

Also, is it possible for me to change Lobster only on my post titles, and not site-wide? I hate to lose it in my header, because it really looks great.

Thanks,

Laura Finger

http://www.laurafinger.com

[Susan]

Laura:

You can submit theme support questions at the Pretty Darn Cute Design support forum here: https://prettydarncute.com/forum-index/

The Modern Blogger Pro theme was updated in September, and the fonts were added to the stylesheet in this section:

/* Import Fonts
--------------------------------------------- */

If you want to change the Lobster Two font just on post and/or page titles, update this section in your stylesheet:

.entry-title {
color: #545454;
font-family: 'Lobster Two', sans-serif;
font-size: 36px;
font-weight: 300;
line-height: 1;
}

~ Susan
Pretty Darn Cute Design Support Admin

[Author]

Posts