The picture attached shows the problem.
As you can see from the picture, the tabs are clustered together.
How can I space them out so that they spread out evenly in the entire space?
You have to edit the custom stylesheet. In the menu bar go to "Atom" > "Stylesheet..." and copy this into the custom stylesheet file:
.tab-bar .tab {
flex-grow: 1 !important;
max-width: none;
}
After saving the tabs should spread.
This is a better solution: Go to Settings > Themes > theme settings (the gear icon next to the UI theme dropbox) and use the Tab Sizing option
source: https://discuss.atom.io/t/the-tabs-got-shorter-in-v1-8-0-what-happened-how-do-i-go-back/29791
Related
I am using the tab in Materilizecss to design the Navigation tabs in my web app.
By default, the first tab is selected. This is indicated by an underlining line under the first tab, as seen in the picture below.
By default, I do NOT want ANY of the tab to be preselected! To be clear, I do not want any of the tabs to have any underlining by default as seen in the image below.
I want the tabs to be unselected by default until a user chooses one of the tabs, only then will that tab get an underlining line under it.
Unfortunately, I can't seem to find any documentation about removing the default selected tabs/underlining.
Looking forward to your help.
For remove your border bottom :
.target {
border-bottom:none;
}
And to bring up with hover :
.target:hover {
border-bottom: 1px solid red;
}
I am having trouble changing the styles of a widget on my Wordpress site.
The one I am targeting is the bottommost one on the homepage: http://rfm-inc.com. It is the section of the page that reads "Proud member of the Mitsubishi Materials family of companies"."
The styles seem to be mainly applied to the ID ".content", but I'd like to alter those styles ONLY at the ".text-3" level.
I can change the content stylings and get the effect I want in the widget, but it changes all of the other widgets.
I want the bottom widget to fully span the page (ie, full blue background, centered text, resizing and wrapping text at smaller screen widths), but to leave the other sections alone.
Any tips on how to target this widget independent of the other sections?
Usually wordpress widgets have a their own style css file in wp-content/plugin and the name of the plugin.
Anyway if you open the developer tools on the web browser and you click on the element you want to change, you will figure out which selector to use.
Make some test on the developer tool and then make the changes on your files.
In this EXACT CASE you can do it with:
.widget:last-child {
/* your rules */
}
As this is the last child of the section id="main".
Or use its ID:
#text-3 {
/* your rules */
}
Okay. I solved it. Let's see if I can explain.
First, I changed the #content container to:
body.home #content.col-full {
max-width: 100% !important;
}
This of course expanded the full container.
Then I was able to style individual widgets as needed.
It was the more parent element that needed styling, then everything else flowed from there. But it was hard for me to target, since I:
Didn't know how to target only the home page (body.home)
Didn't see that the container was #content
Didn't realize that the easiest thing to do was to adjust the container and to style the contained widgets separately
I am using the "No Sidebar Pro" WordPress theme built on Genesis. By default, this theme hides the secondary/footer menu on mobile. StudioPress's support told me that removing the following from the CSS would allow the secondary menu to be visible on mobile.
.js nav {
display: none;
position: relative;
}
Indeed, this does show the secondary menu on mobile as desired, however now the primary menu defaults to being expanded on page load. When I kept the above code present as is, the primary menu would default to closed on page load.
How can I modify this CSS so that the footer menu shows on mobile, but the main menu defaults to closed?
Instead of removing those styles, add the following right below that.
.js nav.nav-secondary {
display: block;
}
This should fix your issue.
I am using the Material Design Light "Text Heavy" template page as a basis for a page I am creating. I would like to use the tabs up the top to link to places within the page without hiding other content: ie scroll down to a card, without hiding card above and below.
How can this be accomplished?
Using tabs as navigation isn't supported in v1.0.x, sadly. It's been added in master, though, so it'll be coming in v1.1!
For now, your best bet is to override styling for panels. So just code up everything as normal, as if you wanted your panels to be hidden, and then override their styles:
/* Use an extra class to make sure you only target the
ones you want. I used 'my-panel' in this example. */
.my-panel.mdl-layout__tab-panel {
display: block !important;
}
That should override the mdl-layout__tab-panel's default behaviour, which is to hide.
If this doesn't work, just share a codepen and I should be able to help further!
I implemented a simple tab navigation by using <ul><li><a> , the problem is that there are several "layers" on each tab still needed. what I mean is, In my current implementation I have:
-tab text which is <a>text</a>
-on each tab I have a tab icon image, which I put on <li> as background-image of <li>,
But I still need:
-tab seperator image (A vertical bar image) which I intend to put on <a>,and position it on the left side background-position: left , it is working but this implementation is not in my code which I showed below on jsfiddle site because I did not find a suitable image on internet
-tab background image which occupy the whole tab, I have no idea where I should put this image?
Please check & run my implementation here on jsfiddle, in the css code, I used background-color instead of background-image just to express what I want to achieve, but I need to use background-image as the tab background.
What I tried:
I tried to put the tab background image on <li> but it will hide the
icon image which has already on <li>,
I tried to put the tab background image on <a> but it will also hide the tab seperator image when mouse hover
How to get rid of this layer probelm on tab implementation then? (Please do not suggest me to use less image, since it is one requirement of this app to use those images.)
(By the way, all images I mentioned have mouse "hover" counterpart)
If you don't want to change the HTML, you can use pseudo-elements:
Fiddle: http://jsfiddle.net/Pq7LC/39/
li:before{
content: "";
background: pink;
width: 20px;
height: 61px;
display: block;
position:absolute;
}
li:first-child:before{ /* Don't add image border before first li */
content:none;
}
You can do it with css, no need of images.
http://jsfiddle.net/Pq7LC/40/
Hope it helped you :)