CSS to customize mobile theme
-
How do i have the distance from the top and middle widget be different than the middle and bottom widget?
You can use your browser’s inspector tools to obtain a unique ID for each of your widgets and then add padding to the bottom for each one. For example,
I found that #text-20 is the unique ID for the first widget. You can therefore add padding to the bottom of it with the following:
#text-20 { padding-bottom: 15px; }#text-19 is the unique ID for the second widget. You can add padding to the bottom of it with the following:
#text-19 { padding-bottom: 15px; } -
Is there a way for me to work on another theme and prepare it while this site is still up and looking cool? Then once it’s ready i can publish it to this site for good?
You’re free to set up a second, separate test site and set it to private. We have tips for doing this here:
-
I like the transparency on the page, but it won’t apply it to the header?
Also the menu bar on the site doesn’t seem to go transparent and when i applied the transparency the lines that used to be on both sides of the widget (the design) are now gone? why? how do i apply transparency and keep the lines?
The lines you mentioned on either side of the menu are added via a background image, that has a white background. If you’d like to change the background to be completely transparent then you therefore won’t be able to use that background image.
After some experimenting, I found that the logo and navigation need to have a lower opacity set in order to look similar to the rest of the elements on the site:
The following should fix things:
#logo, #navbar, .main-navigation ul, .main-navigation ul li { background: rgba(255,255,255,0.2); }It’s likely this is due to the ordering of the site’s elements and how they’re stacked up on top of each other.
I think I caught all of your questions! Let me know if I missed anything.
-
So, to really play around with a new site, I need to make a new one set to private and pay for a seperate premium plan? If so, that’s a bummer there needs to be 2 payments:/
-
Oh, ok! So I can deal without the lines near the menu, but if I don’t have the lines there can I lose the line at the bottom of the page as well to keep everything uniformed?
How do I do that for me normal site?
How do I do that for my mobile site?
-
Let me know what you find out about the strange footer glitch with the view full site from a phone!
-
Is there a way to lessen the padding/distance between the menu and body/widget are on the main page?
-
-
@tylerbernhardt: When I referred to a separate thread for each of your questions, I meant a completely new thread on this forum. You can start a completely new thread via the following form:
https://en.forums.wordpress.com/forum/css-customization#postform
Apologies for not being clearer!
It’s preferable for each new question to belong to a new thread so that they’re easier for staff and volunteers to jump in on. In addition, it means that threads are easier to discover/browse by others who may be searching the forum for answers.
-
So, to really play around with a new site, I need to make a new one set to private and pay for a seperate premium plan? If so, that’s a bummer there needs to be 2 payments:/
Is it necessary for you to use the features of WordPress.com Premium during the initial stages of testing new themes? It may be worth seeing if it’s enough to experiment under our free plan. If you do need any of the features of the plan, let me know the name of your test site and I can then add a one week trial of the plan to it.
-
Oh, ok! So I can deal without the lines near the menu, but if I don’t have the lines there can I lose the line at the bottom of the page as well to keep everything uniformed?
Sure! That border can be removed with the following custom CSS:
.hentry { border-bottom: none; } -
Is there a way to lessen the padding/distance between the menu and body/widget are on the main page?
The following snippet would remove the margin at the bottom of the navigation:
#navbar { margin-bottom: 0; }The following would then reduce the padding at the top of the post area:
.postarea { padding-top: 10px; }You could increase/decrease the values of both margin-bottom and padding-top in the above snippets, if you’d like to experiment with different amounts of spacing.
-
And how do you lessen the padding at the bottom of the page?
You would need to reduce the value of padding-bottom of the post area in order to do that:
.postarea { padding-bottom: 10px; }Hope I caught all your questions and I’ll keep you updated with news on the widget issue.
-
Great! So thatll control the distance of my post area to the menu bar, but is there anyway to control the distance of the social media icons (1st widget) from the menu bar?
-
When viewing site or mobile site, theres three dots at the bottom of the page that allows u to log in. Thats convinent to me, but for anyone viewing my site it will look unprofessional. Anyway to hide that in general?
-
-
Great! So thatll control the distance of my post area to the menu bar, but is there anyway to control the distance of the social media icons (1st widget) from the menu bar?
The social media icons are included within the site’s main post area, so the CSS I provided would also increase/decrease their distance from the menu.
When viewing site or mobile site, theres three dots at the bottom of the page that allows u to log in. Thats convinent to me, but for anyone viewing my site it will look unprofessional. Anyway to hide that in general?
I can see that one of our volunteers helped you out with the needed CSS to hide the action bar on your other thread, but also wanted to note that the bar is only visible to admins that are logged into WordPress.com. So, other visitors to your site would not be able to see it.
Hope that’s helpful and that you’re having a good weekend! :)
-
-
Hi Tyler,
We’re still working on it! We haven’t been able to replicate the issue yet, but will keep working on it and let you know what we come up with.
-
Great!
Since i am talking to you- can you help me with an issue? Ive posted it, but you’ve been extremely reliable in the past, so i trust you!
So, i made another text widget (text-24) with social media icons in my sidebar for the mobile site only. How do i have them hidden from the main site and show on the mobile site only?
We have a bunch of css up there and im not sure if any are overriding any others?
- The topic ‘CSS to customize mobile theme’ is closed to new replies.
WordPress.com Forums 