I'm trying to style navbar tabs. I have two pieces of code that work, but I need more control over the individual tabs and not sure how to do it.
These tabs are under the header and at the far right. And I'm trying to round the bottom left corner of only the first tab. The two code snippets below both round the bottom left of every tab in the nav bar.
I'd like to figure out the proper code that would give me control over each tab and allow me to style each tab individually. The 2 snippets below get me halfway there, just not sure which is better to be improved on or what to add.
.custom .menu, .custom .menu a, .custom .menu li ul {
-moz-border-radius-bottomleft:.5em; font-weight:bold;
-webkit-border-bottom-left-radius:.5em; font-weight:bold;
-moz-border-radius-bottomright:.0em;
-webkit-border-bottom-right-radius:.0em;}
Or this:
/* Remove the border from the far left. */
ul.menu{border-left:0;}
/* Add the left border back in. If you change the color of the nav border in the WordPress admin panel, you will also have to manually change the left border color below. */
ul.menu li.tab-1 a{
border-left:1px solid #CCC;
-moz-border-radius-topleft:.5em;
-webkit-border-top-left-radius:.5em;}
/* This creates the rounded borders. */
ul.menu li.tab a{
-moz-border-radius-bottomleft:.5em; font-weight:bold;
-webkit-border-bottom-left-radius:.5em; font-weight:bold;
-moz-border-radius-topright:.0em;
-webkit-border-top-right-radius:.0em;}
Thanks for any help
You might be over-engineering here - have you considered using the CSS :first-child pseudoclass? Failing that, how about rounding the bottom left of the <ul> rather than the first <li>? From what you've explained, both of these would achieve your desired results without writing a line of PHP.
What I would do since I generally have a php script of some sort generating the html, is when the html is generated give each tab its own style.
// Assume $menu_tabs contains tab names
echo "<ul>"
foreach($menu_tabs as $tab) {
$tabclass = tabclass($tab) // Just turn it into a valid css class name
echo "<li class='tab $tabclass'>$tab</li>"
}
echo "</ul>"
Or something to that effect.
Then you can just create a css style
.tabclassname {
// Special CSS goes here
}
Alternatively if you are not generating the tabs programmatically. You can just type in a name for each class manually.
EDIT: I mainly suggested PHP because you mentioned wanting control over all of your tabs. If you just want the first tab, then ul:first-child is a good method, or putting the rounding effect on ul as was suggested by Gavin
Related
I'm using Wordpress>Atahualpa Theme>Recent Posts Widget Extended on my site toawaken.org.
Recent Posts are listed in the r.h. sidebar. I have added a "bullet" (disc) in front of each Post title. When I did so, it threw the spacing off.
If you link to my site, you will see for some reason the added bullet is forcing the text to appear one line below the bullet, instead of right next to it, on the same line as the bullet, as it should. I want the post's title to line up on the same line as the bullet, not one line below it. I tried adjusting margins/padding in the CSS editor, but no margin/padding combination changed this. Nor did changing the div list-style-position from inside to outside:
div.widget ul li {
display: list-item !important;
list-style: disc !important;
list-style-position: inside;
color: #2D85BA;
}
If anyone could please check the sidebar on my site and offer a remedy, would be much appreciated.
This plugin seems to have a clearfix implemented in the <li> elements, and it's pushing headers to the next line. You can override it with this CSS:
.rpwe-clearfix:before, .rpwe-clearfix:after {
content: none;
}
As a side note, try not to use so much !important expression in your stylesheets. You'll end up having more and more difficulties changing the CSS rules. If you want to everride certain rule, you use a selector with just a bit stronger specificity than the one you want to change.
You can read more about selectors' specificity here.
EDIT #3, and finall:
Ok, so i actually made it happend. Idiotically, however. In case someone will need the same, i'll post a solution here:
What i've did is, basically defined the global style as below:
a:link,a:visited
{
color:#000000;
text-decoration:none;
}
a:hover,a:active
{
color:#000000;
text-decoration:none;
}
That was the very basic parameters i could insert at the global style. The next move is makin' the same inside the link and customize it for ur need as like as u want, hover, make sure u're doin' the copy of that customization of ur div, and insert the :hover thing into it, as following:
.some-div-cutomization
{
text-decoration:none!important;
blabla
}
.some-div-cutomization:hover
{
text-decoration:none!important;
blabla
edit if needed the hover function
}
That's about it. Have fun :)
I've got some source links, that i can't touch, even to insert the class element, so i would be able to change the style of the links, but i do need somehow to change they style.
So, let's say tag of this link would be [link][/link], so what i did is, put inside it div element with full customization and it's worked, however there's two moments:
1) I don't really know if it's may work properly on all browsers, 'cause i need it cross-browser version actually.
2) i can't get rid of the text-decoration line. i've tried text-decoration with none, and even mad a copy style of that specific div with :hover and put inside it text-decoration none, and still, it's not working.
Also, if there's some another trick to avoid such a thing, please share.
EDIT:
I've tried all below, didn't work as i wanted to. BUT, i've made it, but with very, very ugly coding, and i'm not sure it's goin' to work at all browsers:
I've inserted the link-element with underline none inside the one() i can't touch, so now it's link inside another link, witch very ugly.
[link-i-cant-touch]<div class="style_test"><a id="no-textdecoration" href="#">somecooltext</a></div>[/link-i-cant-touch]
.style_test
{
text-decoration:none!important;
font-family: 'qsc';
text-align:left;
padding-top:0px;
color:#000000;
}
#no-textdecoration{
text-decoration:none!important;
color:#000000;
}
#no-textdecoration:hover{
text-decoration:none!important;
color:#1982d1;
}
EDIT Num2
That didn't work as well, because the link is changed to the second one, so it's redirect for "#"... :/
Make sure you target the a tag for the text-decoration, rather than applying it to the div
.my-div-class a { text-decoration: none; }
I don't know what you did wrong, as you haven't posted any code.
But this is the correct way of removing text-decoration on links.
HTML:
Link with text decoration
<a id="no-textdecoration" href="#">Link without text decoration</a>
CSS:
#no-textdecoration {
text-decoration:none;
}
Output: (In image format)
JSFiddle demo: Removing text-decoration from a link
I'm looking for a quick and easy way to hide an element on just two pages that is otherwise in the sidebar on all pages. I tried to do it with css but just can't seem to affect this one spot. This is one of the pages and the client wants the FDIC logo in the sidebar gone. I tried adding page ID and the sidebar css to display:none, but can't work out the right combo. Am I on the right track?
#page-id-63 .textwidget
{display:none;}
Thanks for your help!
"page-id-63" is a class, not an id on the page you linked, so you'd need:
.page-id-63 .textwidget {
display: none;
}
#text-9 > .textwidget {
display: none;
}
Try this out, either include it in a tweaks stylesheet specifically for those couple pages or throw it between style tags in the head.
Edit: I see you have the page number defined as a class in the body tag, you can put this in your main stylesheet adjusting the first class for your specific page (ex. .page-id-13 instead of 63) ..
.page-id-63 > #wrapper > #main > #secondary > #text-9 > .textwidget {
display: none;
}
You need
.page-id-63 .widget-area .text-widget {
display:none;
}
as you have many text widgets, and only want to hide the one in the sidebar.
Yes you are on the right track. What you need to do is apply the style and then have a look at the element using your browser dev tools. Then you will be able to see if
The style applied.
If any other styles are overriding it.
Update
Having checked your site now that is out of maintenance mode, try this
.page-id-63 .textwidget{
display: none;
}
I'm attempting to style the jQuery UI tabs as vertical tabs, but styled slightly differently to the Vertical Tab Demo that they provide.
I'm trying to achieve this:
But the best I can get is this:
You'll notice that the color of the bottom border of the tabs matches the text color, but I really want the border to be consistent around the entire tab.
I could just add a css line in like this:
.ui-tabs-vertical > .ui-tabs-nav li {
border-bottom-color: #C5DBEC !important;
}
But I don't want to hard-code any colors as they are provided by the jQuery UI theme roller, so if I decide to change the theme, or have different themes for different branding of my website, then this will become a nightmare to maintain.
Looking a bit deeper into the problem, it seems that the standard jQuery UI theme css does this:
.ui-tabs .ui-tabs-nav li { border-bottom: 0 none; }
And this is because the whole thing is setup normally for horizontal tabs, which need the bottom border removed. I can't remove this because it's part of the generated theme roller css. I don't think that this should change the border-color property because only the first two of the shorthand border are specified (i.e. width and style). So I would expect the border-color to not be overridden here, but in fact it is, and it's setting it to the font color.
What I've done to attempt to revert this css line is this:
.ui-tabs-vertical .ui-tabs-nav li { border-bottom: 1px solid !important; }
Note that again, I'm not touching the border-bottom-color here.
The result of this, at least in firefox, is this taken from firebug:
For some reason, it looks like the color is being set back to the default browser color, even though nothing touches border-bottom-color. I just want the color from .ui-widget-content .ui-state-default to come through, but I can't work out how to do it.
Using inherit doesn't work because I don't want to take the color from a parent element in the DOM.
Here's a jsFiddle showing my problem. Can anyone help me get a maintainable, solution?
Use #hexblot's answer and get the color dynamically.
To do this create a faux item, apply the jQuery class you want and after that use .css() to get the color. Simple as that.
+1 for trying to find a clean solution, without hardcoded stuff.
just add
.ui-state-active { color: #2E6E9E !important; }
and you should be ok. updated the fiddle with this line in the CSS (last line).
I've got a table that has some <input type="text"> boxes in it, and I want these to show as normal text when printing. I have set up a media="print" stylesheet with
input
{
border-style: none;
}
in it, and this removes the border so the content just looks like text, but the input is still pushing the width of the column to its actual width (not surprisingly) so I get unnecessary empty space and column widths. Is there a funky way to somehow either set the input's width to its content size using CSS, or some other way to fix this?
Someone on another forums suggested using a print button which creates client side scripting to physically change the page markup, but unfortunately that's not really practical due to the complexity and dynamic nature of the page.
I'm pretty sure this can't be done, but I thought I'd ask.
Nope, I don't think this can be done without some scripting. But the scripting would be really easy to achieve with a Framework like Jquery:
For each input element, you would create a <span> next to it and give it a class that is hidden in the media="screen" stylesheet, and visible in media="print".
The input element itself would get a class that works the other way round, visible in screen and hidden in print.
Each input element would get a change event that updates the neighboring span.
I don't have the JQuery routine yet to pull this out of my sleeve, and not the time to put it together right now, but it is definitely solvable and still quite unobtrusive - no need to execute any scripting when the user starts printing.
I bet if you re-tag the question or ask a new one, one of our resident JQuery gurus will take a look at it :)
If you are using Bootstrap:
#media print {
.no-print {
display: none !important;
}
.form-control
{
border: 0;
padding:0;
overflow:visible;
}
}
I came across this searching for information on how to style my forms and a few other things.
After messing with some CSS I figured out a CSS only method that works for me.
My forms all have styling that involved color background and a border that is black.
In my print CSS file I copied my form css and changed all of the colors (not the text itself) to white. In other words it hides my text box and displays only the text.
Original CSS - #form textarea, #form input, #form select{ border:1px solid #ddd; color:#313131; }
Print CSS - #form textarea, #form input, #form select{ border:1px solid #fff; color:#fff; }
Works like a charm =>
Hope this Helps
input { border-style: none; display: inline}
I'm using ASP.NET and had the same issue.
I solved it by adding a Label that corresponds to my Textbox, and had two classes set up:
In #media screen:
.hdnPrint {visibility:visible;display:block;}
.visPrint {visibility:hidden;display:none;}
In #media print:
.hdnPrint {visibility:hidden;display:none;}
.visPrint {visibility:visible;display:block;}
For the textbox, I assigned the hdnPrint class, and on the label, I assigned the visPrint class. When the user prints the form, the label is displayed and the form field is hidden.
I assume you can do something similar in a non-ASP.NET environment by following the same pattern.
No scripting required.
To define the width of the input fields in the CSS print section, use:
width: ?cm
for the corresponding input elements.
Tested in Firefox; maybe it wasn't working in previous versions of the browser.
For bootstrap this works for me.
It is based on user5712635s answer but I added the appearance properties to get rid of the down arrows on selection inputs.
#media print {
.form-control
{
border: 0;
padding:0;
overflow:visible;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
}