CSS to customize mobile theme
-
I want to know how to remove widgets on my mobile theme only using CSS.
Also, i want to know how to use a seperate picture from my media to use as a header on my mobile theme. That means, one header on website, seperate header for mobile theme.
Finally, is there also a way to add social media buttons to the footer of my mobile theme only?
The blog I need help with is: (visible only to logged in users)
-
Hi Tyler,
I want to know how to remove widgets on my mobile theme only using CSS.
You can add the following snippet via the CSS panel of the WordPress.com Customizer to hide all widgets except for the social icons from your mobile theme:
.widget-area .widget { display: none; } .widget-area #text-20 { display: block; }Also, i want to know how to use a seperate picture from my media to use as a header on my mobile theme. That means, one header on website, seperate header for mobile theme.
The first step here is for you to upload the image you wish to use with your mobile theme to your Media Library. From there, copy/paste the URL for the image.
Next, paste the following custom CSS to the Customizer, as before:
#header-img { background-image: url(https://example.png); background-size: contain; } header img { visibility: hidden; }In the above CSS, replace https://example.png with the URL to your image.
Finally, is there also a way to add social media buttons to the footer of my mobile theme only?
The first CSS snippet I provided will serve to display the social icons on your mobile theme, and you can add the following to hide them from your main theme:
#text-20 { display: none; }Let me know how you get on with that above snippets! We’re right here if extra questions come up.
-
Great! Looks like it worked out so far.
– what can i add to remove the social media widget from my mobile theme? I dont like that location, i rather remove all those widgets.Also, through CSS, is there a way to adjust the color of the mobile menu bar and remove the “search” option.. So its just a menu drop down?
I want menu bar to be the same blue as everything else.
-
Also,
When i loaded the custom mobile header the image has a white outline around it and looks like it tiles the image..even though it is the same image, i just changed the background.
Why don’t PNG files don’t work- i want to make it a PNG so the font just goes over the actual website background instead of adding a separate background to my header font. Is there a way to make this happen?
-
If not all that….is there a way to not have a space/gap in between the header and body of the mobile theme?
-
Hi Tyler,
– what can i add to remove the social media widget from my mobile theme? I dont like that location, i rather remove all those widgets.
You can remove the following snippet that I previously provided to stop the social icons from displaying on your mobile theme:
.widget-area #text-20 { display: block; }Also, through CSS, is there a way to adjust the color of the mobile menu bar and remove the “search” option.. So its just a menu drop down?
Are you referring to the mobile theme specifically? If so, the search form can be hidden with the following:
.search-form { display: none; }The background of the menu bar can be changed from blue to any value you’d like with this snippet:
.menu-search { background: #663399; }You can change the value of #663399 to any HEX code of your choice. If you’d like to experiment with different colours, try a few Google searches to get a list of HEX codes and their corresponding values. Here’s an example of a site that I’ve used before:
-
When i loaded the custom mobile header the image has a white outline around it and looks like it tiles the image..even though it is the same image, i just changed the background.
You could make some tweaks to the original CSS I provided to reduce the white outline and prevent the image from tiling. Can you give the following a try?
#header-img { background-image: url('https://tylerbernhardt.files.wordpress.com/2016/09/mobile2.jpg'); background-size: 100%; background-repeat: no-repeat; } header img { visibility: hidden; } #branding { padding: 0; }Thanks!
-
Great! Working on the menu color now.
Still not happy with how header. Is there anyway to connect header image to body by adding white in between the two (if i used header with white background) so it looks like 1 page?
Also anyway to have the background image be the background of my header text/image. If you look now u could see what im trying to do. I tried to save image as png but the white background is still there:/
Is there any way to remove that white strip of color where the widgets used to be on the footer of the site?
Finally, Any way to incorporate image mapping on the header?
You have been such a great help! I really appriciate it.
-
Hi Tyler,
Still not happy with how header. Is there anyway to connect header image to body by adding white in between the two (if i used header with white background) so it looks like 1 page?
You could reduce the margin in between the header and the page, so that they appear to be more joined up, with the following:
#branding { margin-bottom: 0; } #page { margin-top: 0; }Also anyway to have the background image be the background of my header text/image. If you look now u could see what im trying to do. I tried to save image as png but the white background is still there:/
Setting the background of your header to transparent, so that the background image is visible beneath it, should do the trick:
#branding { background: transparent; }Is there any way to remove that white strip of color where the widgets used to be on the footer of the site?
Sure! To do that, replace the following snippet that I previously provided:
.widget-area .widget { display: none; }With the following:
.widget-area { display: none; }Finally, Any way to incorporate image mapping on the header?
I’m unclear on what you mean by “image mapping.” Could you clarify for me?
Thanks!
-
Wow! This is like magic. haha.
SO, i am liking how it looks when you combine the header with the page, but is there no way to toally join them? I still see a thin line between the two.
There transparent background on the header looks cool too! Is there a way to do the same for the page/body? That could open some doors.
By image mapping i just meant if i put a twitter icon or something in my header is there a way to have it link to my twitter account? In bandcamp, they call it image mapping.
Either that, or i wish there was a way to add social media icons to the bottoms of every page- unlike my widget which looked separated from the main body of the page, it would be cool if they could be added to SAME page at the bottom. I guess if that is at all possible i could get all the same coding from the widget? This would obviously only be applied to my mobile theme.
-
Oh, and-
1. is there anyway to make both the header and body a certain percentage of transparency, like 80% or something? And if so, what can this be applied to both mobile theme and the website theme?2. Is there anyway to make the “footer” thats in the mobile theme transparent fully (not there) so all you see is the background?
3. anyway to hide the small smiley face at the bottom of the screen on both mobile and normal site?
again, THANK YOU!
-
Hi Tyler,
I’m glad the mobile theme is starting to look the way you wish it to!
SO, i am liking how it looks when you combine the header with the page, but is there no way to toally join them? I still see a thin line between the two.
Removing the padding from the header area should get rid of the line:
#branding { padding: 0; }There transparent background on the header looks cool too! Is there a way to do the same for the page/body? That could open some doors.
Absolutely! To do the same for the page you would target the #page ID in addition to the #branding ID (which targets the header):
#page, #branding { background: transparent; }By image mapping i just meant if i put a twitter icon or something in my header is there a way to have it link to my twitter account? In bandcamp, they call it image mapping.
Adding your social icons to a text widget, as you previously did, is the best way to achieve what you’re after. Your theme supports widgets in the sidebar or footer area. Perhaps you could try adding the icons to the footer to see if it looks OK for your needs?
-
1. is there anyway to make both the header and body a certain percentage of transparency, like 80% or something? And if so, what can this be applied to both mobile theme and the website theme?
You could set a percentage by using the CSS trick explained here.
As explained in the linked guide, you can set a background to your page with a certain rbga value (in this case we will user 255, 255, 255 for the colour white). You can then set a certain opacity as the final numerical value in that CSS snippet:
#page { background: rgba(255, 255, 255, 0.8); }The opacity of 0.8 set in the above snippet sets the opacity of the background colour to 80%. You can change this value from anything between 0 to 1 e.g. 0.1, 0.2, etc.
2. Is there anyway to make the “footer” thats in the mobile theme transparent fully (not there) so all you see is the background?
You can target the footer using the #colophon ID:
#colophon { background: transparent; }3. anyway to hide the small smiley face at the bottom of the screen on both mobile and normal site?
You can hide the smiley face from view using the following CSS snippet:
#wpstats { visibility: hidden; }If you’re curious about how I found the needed CSS for your questions: I used my browser’s built in tools to inspect the theme’s existing CSS and experiment with the specific CSS for your needs. We have guidance on how you could use your browser’s tool in a similar way here:
https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
Let me know if you have any extra questions. :)
-
So, i’m loving header and page 80% transparent, but even when adding the padding code there still seems to be a faint line between the header and page. It seems to be more obvious when you start making the transparency.
Also, how do i apply this same transparcy to my main site (not the mobile theme)? itd prob be applied to header, page, and widgets to get full effect? And talking about the maine theme, is there a way to get the background image to stretch to fit whatever screen?
Youre really making me dream come to life. I know this theme is old, but i have grown attached to the way it looks. The only sucky thing is that it wont auto adjust to any screen size like ipads and such. Theres no way to fix this right?
-
Also, how can i remove the space between widgets on my actual website?
No way to remove wordpress.com at bottom right?
-
Hi Tyler,
there still seems to be a faint line between the header and page. It seems to be more obvious when you start making the transparency.
The faint line is caused by the box shadow that’s added to the header and page. You can remove it with the following:
#page, #branding { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }Also, how do i apply this same transparcy to my main site (not the mobile theme)? itd prob be applied to header, page, and widgets to get full effect?
Did you have a chance to check out the guidance I provided on using your browser’s tools to inspect your theme’s CSS? You can use that guidance to find the specific elements you need to target in your CSS.
In this case, the elements are as follows:
#container, #logo, #navbar, .main-navigation ul, .main-navigation ul li { background: rgba(255, 255, 255, 0.8); }And talking about the maine theme, is there a way to get the background image to stretch to fit whatever screen?
I visited your site on a few larger devices and the background image did stretch the full width on all of them. Is that not the case for you? If not, please let me know the screen size of the device you tested on.
I know this theme is old, but i have grown attached to the way it looks. The only sucky thing is that it wont auto adjust to any screen size like ipads and such. Theres no way to fix this right?
We don’t make big changes to the code of retired themes and the CSS required to make the theme responsive goes far beyond the scope of support this forum is intended for.
You could consider searching our repository for other free, minimal themes that do adapt to the size of the screen they’re being viewed on:
https://wordpress.com/themes/filter/minimal/type/free/
Examples of such themes include Libre, Twenty Sixteen, and Penscratch.
-
Also, how can i remove the space between widgets on my actual website?
You could reduce the padding beneath each widget:
.widget { padding-bottom: 10px; }Increase/decrease the value of padding-bottom to your liking.
No way to remove wordpress.com at bottom right?
We ask that you keep the credit to WordPress.com visible at the bottom of your site. You can, however, change its wording and appearance via the Site Identity panel of the WordPress.com Customizer.
-
Sorry had to book mark the article for this weekend cause work is crazy busy now- making it a point to look it over.
So in regards to stretching to fit the screen:
if i am on my phone and i say view full site…there is a white portion at the bottom of the screen..wanted the background to stretch to cover that if anyone were to view full site on a phone. how do i do that?Talking bout this, on a phone in view full site- go to the “MUSIC” page. i don’t know if you are seeing this too, but at the bottom of the page something weird is happening where the click below to join mailing list comes up a couple times…why is this? can it be fixed?
How do i have the distance from the top and middle widget be different than the middle and bottom widget?
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?
ex:
————— HOME I BIO I MUSIC ——————–(dashed lines…which are not actually dashed in the theme, its just for this example…are the ones i’m referring to)
FINALLY,
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? I know it will take time to create it on a new theme with all these customizations and i rather take my time while it’s not live. Like a temp site or something where i can try out new themes and explore with it not interfering with the site i have now until i want it to?
THANKS!
-
Hi Tyler,
Could you please split future questions up into separate threads? That will make it much easier for staff and volunteers to manage and work our way through everything. For now, I’ll read through your last reply and split each question up into a different reply as I go.
-
if i am on my phone and i say view full site…there is a white portion at the bottom of the screen..wanted the background to stretch to cover that if anyone were to view full site on a phone. how do i do that?
Talking bout this, on a phone in view full site- go to the “MUSIC” page. i don’t know if you are seeing this too, but at the bottom of the page something weird is happening where the click below to join mailing list comes up a couple times…why is this? can it be fixed?
The background image does stretch across the height and width of your background, however, the white you’re seeing is the top part of the mailing list widgets in the footer (which you can see in full on the music page).
This is a strange glitch! I’ve not yet been able to replicate or pinpoint the cause but will spend some time digging into this and get back to you.
- The topic ‘CSS to customize mobile theme’ is closed to new replies.
WordPress.com Forums 
