At the moment, I'm building my own Wordpress Theme. Amongst others I have a problem with the widgets... i want them to have a border (CSS) but it wont work. I tried everything, from different paddings to different margins. I mean its just a border... can it really be that hard?!
URL: http://www.biggaa.de
Search for this section in your CSS
#sidebar li {
list-style-type: none;
margin-top: 5px;
margin-bottom: 5px;
text-align: left;
border: 1px #CCC;
background: black;
}
You need to change the line that says
border: 1px #CCC;
to
border: 1px solid #CCC;
Also, change to color to whatever you desire. Your widgets also use the CSS class "widget" so you could try doing this as well:
.widget {
border: 1px solid white;
}
I would recommend using Chrome's Developer Tools, or Firebug for Firefox, and inspect the element of the page (right-click then inspect element). This will allow you to focus in on areas of your website you want to change, without having to dig through all the CSS. Good luck!
Related
When I use the following CSS, I go from the output of the image at the top to the image at the bottom:
.menu-border {
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
}
The purpose is to have a larger hover area for the mega menu, otherwise the mega menu disappears when the mouse is between the ''Assessment'' menu and the mega menu box. However, when my padding is at 30px, all the menu items shift higher up. What would I need to add to keep this large box (the edges will be white - I put black so it is easier to see now) without affecting the rest of the menu?
edit1: the menu is generated from the pearl theme for wordpress. The .menu-border is an added css class for the ''assessment'' menu.
If we could get a working snippet it would be easier to help.
Also, there are two menus in your capture. I guess that adding the code it's the second one. Looks you're missing vertical-align property
.menu-border {
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
vertical-align: middle;
}
I'm unsure what you're exactly looking for but have a crack at this CSS that's using the inline-block property -
.menu-border {
display: inline-block;
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
}
Further reading on CSS inline-block
https://www.w3schools.com/css/css_inline-block.asp
If someone ever face that problem, the solution was to replace my code with this
body .stm-header .stm-navigation__default > ul > li > a {
padding: 30px 30px;
}
I'm working on my school newspaper's wordpress website, and I'm trying to indent the content of the rotating tweets widget by 15px. I've tried adding the following code to the wordpress theme editor's style.css sheet, but it hasn't made any noticeable changes:
.rotatingtweet{padding-left: 15px;}
When I add the same line of code in google Chrome in developer mode, it has the desired effect, but I just can't get it to work by editing the website's main style.css file in the "Voice" wordpress theme.
Thanks for your time!
-John
The tweets are displayed with position: absolute within their container, so they ignore the padding.
Put the padding on the outer div instead, then adjust the header:
.widget_rotatingtweets_widget {
padding-left: 15px;
}
.widget_rotatingtweets_widget h4 {
margin-left: -15px;
}
EDIT: The above, with additional tweaks to borders and such, will work, but there may be a slightly easier solution.
Instead of using padding, give the rotating tweets container a left margin. In your style.css file (probably line 102), there is a selector:
#content .rotatingtweets,
#content .norotatingtweets {
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
margin-bottom: 3%;
}
If you change this to:
#content .rotatingtweets,
#content .norotatingtweets {
margin-bottom: 3%;
margin-left: 15px;
}
and move the borders to the elements just before and after the rotatingtweets container:
.sidebar .widget_rotating_tweets .widget_title {
border-bottom: 1px solid #DDD;
}
.widget_rotating_tweets .follow-button {
border-top: 1px solid #DDD;
}
This seems to accomplish what you want.
I'm working on something in my free time, a little selection tool for a game I play, Dota2.
I've poured the entire HTML output of the current situation in to a fiddle: http://jsfiddle.net/a8T6L/
This has a list of checkboxes and a list of items. These are figures, all set to display: table. The idea is that when I click one or more checkboxes, only items possessing the selected attributes will remain shown. That functionality isn't complete yet, so if you click a checkbox, everything will disappear. Simply uncheck everything to make it appear again.
Each item is a <figure> with and <img> and <figcaption>. Locally I'm generating the entire set with some PHP, I just copied the HTML/CSS/JavaScript so I could make the fiddle.
I was trying to add a border when you hover over an item, but this is shifting the items in some cases.
The relevant CSS code can be found on the fiddle at line 438:
figure {
text-align: center;
display: table;
width: 120px;
height: 90px;
padding: 15px auto; /* not needed unless you want centered */
margin-top: 5px;
}
figure:hover {
cursor: hand;
cursor: pointer;/*Should be good with all browsers*/
border-style: inset;
border-color: #000;
border-width: 1px;
}
I've tried playing with margins and padding(some of that left in the code), even with border-collapse, but nothing seems to work. What I'm trying to achieve here is that when I hover over the figure, an inset appears to let the user know which item is highlighted without anything moving even a pixel. Just the inset appearing.
I realize I could do this with background-color instead, if my intent is simply to let the user know which item is being hovered over, but then I wouldn't know the answer to this problem.
The reason this is happening is because it's adding pixels around the image when you hover. You should set your initial class with a border: 1px solid transparent; so that when you hover you aren't adding pixels but just changing the border color.
figure {
text-align: center;
display: table;
width: 120px;
height: 90px;
padding: 15px auto; /* not needed unless you want centered */
margin-top: 5px;
border: 1px solid transparent;
}
figure:hover {
cursor: hand;
cursor: pointer;/*Should be good with all browsers*/
border-color: #000;
}
Mathew is spot on with the reason (+1) another approach is to use outline instead of border:
figure:hover {
cursor: hand;
cursor: pointer;/*Should be good with all browsers*/
outline-style: inset;
outline-color: #000;
outline-width: 1px;
}
This should have the added benefit of working on browsers that don't support transparent for borders (i.e. IE6) if you are bothering to support such dodery old things. The down side is that the outline will caculate outside of the element, so if you run these elements up against the side of the page you may loose part of your border.
I've got problem with link styling -
hover and active works, but link doesn't, what am i doing wrong?
How can i fix this problem?
#nav{padding: 5px 230px 10px 230px;}
#nav li{
display: inline-block;
list-style: none;
margin: 5px;
padding: 1px;
font: 20px Century Gothic;
}
a.navlink:link{
color:#06AD00;
background: white;
border-top: 1px #958A7E solid;
border-bottom: 1px #958A7E solid;
cursor:pointer;
}
a.navlink:visited{}
a.navlink:hover {
color: black;
background: white;
border-top: 1px black solid;
border-bottom: 1px black solid;
cursor:pointer;
}
a.navlink:active {
color: red;
background: white;
border:0;
cursor:pointer;
}
You CSS works great on my FireFox.
Make sure you define the HTML tags and attributes properly according to your CSS.
Also, note that you may see the wrong style because your links are already visited. Try to put some URLs that you didn't visit. (ex: sdfdsfdsfsfdhgsdf.com ect...)
I've had this same problem with certain versions of Opera and older IE. I've always avoided the :link pseudo-class in favor of just a natural a style - never quite understood the reason why, but :link was always 50/50 while natural a has never failed.
Try this instead for your :link style:
a.navlink{
...
}
This will only create a default state for your a.navlink elements - the other pseudo-classes will still modify it properly. If it doesn't fix things for you, then my next guess would be you've got a conflicting style somewhere. Hard to know for sure without getting our hands on the rest of the source.
:link only matches unvisited links, per spec. If you want to match all links, you have to do something like a.navlink:link, a.navlink:visited {}
I was wondering how you can create css styling inside an input field such as stackoverflow's tagging system?
When you click on a tag, the text will be styled. And also, when you click on the styled tag, it will be normal again. I guess my main concern is how to style text inside an input field?
Thanks!
The tags are not input fields, they are links! On SO, the tags use the following styles:
.post-tag {
color: #3E6D8E;
background-color: #E0EAF1;
border-bottom: 1px solid #3E6D8E;
border-right: 1px solid #7F9FB6;
padding: 3px 4px 3px 4px;
margin: 2px 2px 2px 0;
text-decoration: none;
font-size: 90%;
line-height: 2.4;
white-space: nowrap;
}
a.post-tag:hover {
background-color: #3E6D8E;
color: #E0EAF1;
border-bottom: 1px solid #37607D;
border-right: 1px solid #37607D;
text-decoration: none;
}
Only the bit you type in is an input, the other tags are just styled a elements. When you hit return, the input moves right and gets shorter, and the value is copied and a new a element is created.
The text in the input isn't styled.
This might help you: http://basdebie.com/jquery-plugins/jquery-tags-autosuggest-like-delicious-stackoverflow-facebook/
By looking at this code, you should be able to create something similar, or just use the plugin.