I would like to adjust the CSS code for the Fiore theme on Wordpress. My URL is theuniversalasian.wordpress.com. It is an upgraded premium wordpress account.
With the upgrade, I am able to edit the CSS, but a number of problems are happening. If you could help me with the code, I'd appreciate it!
I want to make a white background for the post texts. When I do that, it moves the date, comments, edit links on the left side. I would like those to stay up top near the post title ribbon. At the moment, the site does not show the changes I wanted because I keep fiddling with the code....
If possible, I'd like the white background for the text to have rounded corners....
The left column somehow loses the graphics....There should be a top cherry blossom graphic like the original theme (http://fioredemo.wordpress.com/), along with the rest of the ribbon image for the post titles.
I cannot paste the entire code here..., but hopefully you will know what I mean from the site...
For the first two, I'll work on the last now, you needed to locate the .entry-content class in your css file.
The first style I added was the background: #fff; which added the white background and then I added border-radius: 7px; which gives it rounded corners.
.entry-content {
color: #2b2b2b; /* changed to black font since you wanted a white background */
width: 300px;
padding: 10px;
border: 0 solid #000;
margin-left: 10%;
margin-bottom: 10px;
margin-top: 10px;
background: #fff;
border-radius: 7px;
}
For the third question, I am not 100% positive but since you removed the nav on your site I believe you removed the image as well. For some reason on the template page I can not find any styles when you inspect an element. The image is apart of the nav/header area so this is just my best guess.
EDIT: Moving the comment/date block around.
.entry-meta {
color: #333;
font-size: 12px;
font-size: 1.2rem;
letter-spacing: 1px;
position: absolute;
text-align: right;
text-transform: uppercase;
width: 150px;
top: 0;
left: 35%;
}
Related
I'm trying to style my navbar and work on its aesthetics but I think I'm missing a trick. The darken which happens on the hover is too big for my liking, but the only size change I can do is an overall padding which doesn't allow fine tuning.
I've spent the last 2 hours looking for a solution and I'm stumped. I bet it's something simple and I'm just not seeing it.
#navbar {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
height: 6%;
transition: top 0.3s;
z-index: 2;
}
#navbar a {
float: left;
display: block;
color: white;
margin: 10px;
padding: 10px;
text-align: center;
text-decoration: none;
border-radius: 30px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
height: 6%;
border: 1px inset #000000;
}
<div id="navbar">
<div class=buttonContainer>
<div class="homeBorder">
Home </div>
Skills
Projects
About
Contact
</div>
</div>
Right now, your code does not show any "darkening" but I hope I still understood your question correctly: You want the background of the navbar links to be of a certain color on hover but the area is too big, especially in height?
You are right, your issue is caused by the 10px-padding that you have set on your link elements. I would recommend you to reduce the padding to maybe 5px to achieve the height you would like to see on hover (same padding for normal and hover, otherwise the links "jump" on hover). You could then wrap all links in an additional div to make universal changes or you could simply work with margins instead. I would also recommend not setting a specific height on the navbar but letting the elements inside determine its height by using padding and margin.
What always helps me when dealing with spacing in CSS, is adding differently colored backgrounds to ALL of the elements involved as to understand their behavior and to test my code.
In case there is a specific reason why you cannot reduce the padding, then please edit your question and make your requirements clearer.
Btw, there is one fatal error in your code:
<div class=buttonContainer>
should be:
<div class="buttonContainer">
(quotes!!)
...and ideally it should be:
<div class="button-container">
as it's not best practise to use camel case in CSS as opposed to JS or other programming languages.
So I want to put a h1 tag in the bottom right corner. What I have currently is below; however, this is very tedious and I want it to always be in the corner. Currently the way I am doing it is based off of my computer's screen, but if someone uses a computer with a different size screen then the tag will not be in the right place. Would there be any other way I could do this so that the tag would be in the same place for all size monitors?
.subH {
font-family: Sedgwick Ave Display;
font-size: 10px;
padding-top: 505px;
padding-left: 1170px;
color: white;
}
<h1 class='subH'>Created by Hybrid Alpaca Game Studios</h1>
Use position: fixed
Example:
h1 {
position: fixed;
bottom 6px;
left: 6px;
}
I've been trying to solve this issue for a few hours, and I've searched for a good solution without much luck. It's driving me bonkers, fiddling with the padding and line-height. Vertical aligning it isn't doing anything (it was suggested in another thread here).
Basically I'm trying to create a responsive nav menu that, when the icon is tapped or clicked, will push down the page when the menu is revealed. I'm using a mobile-first strategy without using a framework (the site is simple so I feel Bootstrap is overkill).
But the icon seems to have an extra 1px on top.
I'm using Chrome, and I've reproduced the issue for you guys to look at.
<i class="fa fa-bars"></i>
i {
width: 48px;
height: 48px;
margin-top: 24px;
box-sizing: border-box;
border: 2px solid #555;
border-radius: 50%;
}
.fa-bars {
color: #555;
font-size: 24px;
text-align: center;
line-height: 48px;
}
You can view the result: http://jsfiddle.net/thecornishninja/jK8rD/
See the icon is not vertically centered? It looks like it has an extra 1px or 2px on top, and it's there whether I use rem or px.
I was using the code from Fontastic, but for demo purposes I'm using the simpler CSS from Bootstrap. The problem exists with both methods.
It's probably something ridiculously simple and I may well end up kicking my own butt, but my brain's fried so I hope you can help.
You need to change the css for .fa-bars:before, that's the element that is mispositioned.
Try:
.fa-bars:before {
content: "\f0c9"; /*This is what the creator of font-awesome put in to show the lines character */
display:block;
margin-top:-1px;
}
Also, it seems the height of the lines altogether is odd, so it won't position correctly. I changed the size of the circle to 49px so that it'd be centered.
Forked jsfiddle.
Actually I'm new to web designing and I'm going to make my own social network and I'm using the amazing layout of Angelsmood.com music social network.
Everything is OK with designing except that I can't place the "Sign Up" button on the right place; it has a lot of margin on its right side. The problem is that there's no margin in my CSS code. Here's my code:
<div id="header_register">
Sign Up
<div>
Artists and their true fans are human angels.
Find them, connect with them and become one of them.
</div>
</div>
And Here's the CSS:
#header_register {
position: relative;
font-size: 12px;
}
#header_register a {
display: block;
height: 30px;
line-height: 30px;
background: ##810101;
color: #fff;
font-weight: bold;
font-size: 14px;
float: left;
text-decoration: none;
border: 1px #508F54 solid;
}
Please help me to fix this.
I made a fiddle and tried to fix your problem the best I could based on the information you gave us.
jsfiddle
Things I did... took your line-height out and moved the link after the div so you didn't have to use it... then I margin: 0 auto to center the <a> tag.
Instead of float: left;
I took it out added a width of the <a> tag so it did not span the width of the screen.
If you need this to function in a different way that I have illustrated ask and I will show you on the fiddle I posted.
Here's a screenshot.
And my CSS markup:
.submitbutton
{
background: url("/Content/SiteImages/button.png") no-repeat scroll 0 0 transparent;
color: white;
cursor: pointer;
height: 26px;
width: 76px;
margin-left: 8px;
margin-top: 12px;
}
Also, I'd like the background image to stretch to fit into the dimensions of the button. Currently it's displaying full size (I think). Any tips for this new HTML web developer?
HTML buttons always have a border, simply setting border:0; should fix this.
Try stating
background: 0; outline: 0;
on it.
Note: This should only be used for testing purposes, disabling the outline makes people who navigate with their keyboards to not receive feedback when focusing on your button.
If it works, try using a more subtle outline.