Mobile Theme Font Colour

noleskie · Member · Aug 29, 2013 at 1:02 am
Copy link

Add topic to favorites
Hi there.

I am in the middle of updating my website,
but I seem to have two teething problems remaining.

The first one (and the one I will focus on this topic) is regarding my mobile theme.

My theme is responsive; however, since the masthead’s background is set to transparent (because of the website background), I want to change the font colour, when it reverts to the mobile layout to black. I tried this following code:
```
.main-navigation-mobile-theme .menu li a {
    color: #000000;
}
```
That, however, did not work, due to syntax errors. I want to know what the correct CSS code is to rectify that.

Your assistance is greatly appreciated; thanking you in anticipation.

The blog I need help with is: (visible only to logged in users)
noleskie · Member · Aug 29, 2013 at 1:33 am
Copy link
P.S.: When I am referring to “mobile-theme”, I am referring to when people view my website using a tablet, and not smartphones, as the font colour is set to #112358 when viewed on my smartphone, but is set to white when it is viewed on a tablet.

Thanks again.
thesacredpath · Member · Aug 29, 2013 at 4:28 am
Copy link
To change things in the mobile theme, you have to precede the CSS selector with .mobile-theme as below. Give the following a try and see what happens.
```
.mobile-theme .main-navigation .menu li a {
    color: #000000;
}
```
noleskie · Member · Aug 29, 2013 at 4:48 am
Copy link
I suspected that would be the correct code.
I’m at a loss, however, this is the end result…
…I wonder where I went wrong, now.
noleskie · Member · Aug 29, 2013 at 10:16 pm
Copy link
I gather from my other topic that the link was dead;
so, if you want to have a look at why I think it’s still not resolved,
here’s the direct link.

Thanks again for your assistance and patience.
thesacredpath · Member · Aug 30, 2013 at 10:51 pm
Copy link
Ok, I think now I’m understanding. You aren’t actually using the “mobile” theme, but relying on the responsive theme.

Your normal navigation is replaced with the simplified navigation at about 780px in browser window width that looks like this: http://flippintestblog.files.wordpress.com/2013/08/noleskie-780px.png

We can likely use an @media rule to change the text color, but I need to know what you want to change.

When I click on “Navigation, the simplified menu appears below it with the current page text as white with a dark blue background. The other menu items are a lighter blue, and when hovered get a slightly lighter blue background with white lettering. “Say Hi” remains blue with the white lettering when I hover the “photography submenu item. If I click “photography” and go to that page (with the narrower browser) the menu collapses to the “navigation” tab again. If I click on Navigation again, “Say Hi” is highlighted in the dark blue “current page” color.

If I narrow the browser window down to about 766px in width or less, the menu items center below the navigation button and (still on the photography page) Say Hi and Photography is white letters on blue backgrounds.

With the above as a guide, can you let me know exactly what you are wanting to change and we’ll get it done. :)
noleskie · Member · Aug 30, 2013 at 11:21 pm
Copy link
My apologies with regards to the misuse of the terminology.

The theme I am using is Magnate Express.

I already rectified the response when I am viewing my webpage in the simplified layout (or what I call the ‘mobile layout’), because I added the following CSS:
```
.menu-toggle {
	background-color: #112358;
	color: #ffffff;
}

.menu-toggle:hover {
	text-decoration: none;
	background: #13579a;
	color: #ffffff;
}
```
Is that what you were referring to in your previous comment?

That being said, I want to know how to change the font colour to black when the masthead is moved to the top of the page, as shown in my previous comment’s link (or, if you look at the link I provided you earlier in this comment, you can see that there are three responsive layouts — I am referring to when it is viewed on a tablet / iPad <sup>®</sup> ).

The reason being is that I made the masthead transparent, to allow my website’s (black and white) background to stand out more; when the masthead moves to the top of the webpage, however, masthead integrates with the body of the page, and, therefore, now appears on the white background.

I may or may not need to, after changing the font colour to black, also change the current page item’s background colour and/or the hover background colour, but we’ll see if that is necessary…

Thanks again for your assistance and patience. :-)
thesacredpath · Member · Aug 31, 2013 at 4:16 am
Copy link
No problem on the terminology, it can get any and all of us. :)

I’m going to take a break, but I will work on this a little later and use an @media rule and give you an example to try.
thesacredpath · Member · Aug 31, 2013 at 5:25 am
Copy link
Add this to your CSS and see what you think. I’ve done a 1 second fade transition on the #page background (fading it away) at 1399px when the masthead logo moves to the top left of the white area and as that happens, I set the #main background to white (behind the content) in the second @media rule.

The third @media rule puts a semi-transparent white background to the menu items after the logo centers (after clicking on center navigation button) so they are more visible. Given that the background is black and white, a semi-transparent background to the menu items, I think, is a good choice.
```
@media screen and (max-width:1399px) {#page {background: none !important;transition: background 1s;-webkit-transition:background 1s;}}
@media screen and (max-width:1399px) {#main {background: #ffffff !important;}}
@media screen and (max-width:768px) {.menu li {background: rgba(255,255,255,0.8);}}
```
Check things in a tablet and see what happens when you go from portrait to landscape and back again, and also check in a smart phone. In my browser, the logo seemed to move to center at 765px, but that wouldn’t make sense because the standard (iPad) would be 768px wide in portrait orientation, so I used 768px.

Let me know what you think.
noleskie · Member · Sep 1, 2013 at 12:47 pm
Copy link
Apologies for the delay in my reply; I work during the weekends, sadly.

I actually love the @media rules. I tried to understand what it does, and I think I get the picture…
…Here are the links to three photos
Website at 1501px (‘PC View’);
Website at 1500px (Padding Disappears); and,
Website at 1499px (Tablet View).

Now, I tried both sample codes:
```
#page.padding {
padding: 25px;
}
```
and
```
.type-page.padding {
padding: 25px;
}

but neither seemed to resolve the now-absent padding from the left, right, and top borders.

I then realised that it may have to do with the following:
```
.custom-background #page {
padding: 0;
max-width: 1100px;
margin: 0 auto;
}`

That being said, this string of code seems to only apply when it is viewed on a laptop browser…

As for the logo moving to the middle, you are right – it happens at 768px.

We’re getting there; slowly, but surely.
Thanks again for your assistance and patience! :-)
thesacredpath · Member · Sep 4, 2013 at 10:40 pm
Copy link
@noleskie, the three links you gave above return 404 errors.

You seemed to have gotten the bulk of things figured out. I’ll offer the following to provide some white space left, right, and above the content. You can try it and adjust the padding values as you desire. You might want them tighter for smaller screens, somewhere down in the 10-20px range, and may even want to include another @media rule at 768px.
```
@media screen and (max-width: 1400px) {
.hentry {
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
}
}
```

No items found.