So i'm making this site which is based on wordpress for adding dynamic content but i have set up an entirely HTML/CSS and little jQuery built theme.
The issue i'm facing is when I had to place the front page posts like teasers with a link to the entire post
teaser like this :- http://i.gyazo.com/dda9c60eb3a822b84bdcb3e0067dfc3e.png
as i knew nothing about wordpress themes, i took help of esclate's php files and just made up a code that could harbour my css classes,id's and properties with it.
Hence to start with, the post's elements in header.php was setup like this :-
<div class="post-wrapper">
<div id="page">
<div id="page-bgtop">
<div id="page-bgbtm">
<div id="content">
that was the same for the single.php file,
i successfully made the site have teaser posts for the front page but the issue arrived when the same properties of those above ID's got called to the single.php file as the classes and id's were similar, which is shown/open when the user clicks on full article,
i made another class for the single.php post elements but it had no effects.
here is what it looked like :- http://i.gyazo.com/0ec25c1db676463dd6aea209480e9568.png
it shows a teaser and not the full post, how can i rectify this?
btw the css code for them all
#page {
width:100%;
margin: 0 auto;
padding: 0;
display: inline-block;
}
#page-bgtop {
}
#page-bgbtm {
margin: 0px;
padding: 40px 50px 0px 50px;
}
#content {
float: left;
width: 100%;
padding: 0px 0px 0px 0px;
margin-left: -40px;
padding: 20px;
display: inline-block;
margin-bottom: 40px;
font-family: 'Raleway',Arial,sans-serif;
font-size: 14px;
line-height: 23px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
I hope i have discreetly explained everything in my grasp for this issue.
As you are dealing with id's the same will be applied where-ever the id's are used, it overrides classes by default. You can create new id's or add class="" in your html so in your css you can mark elements !important to override the id content. This gets messy though so you would be better to change your ids to classes in the above example and use id's to make small changes to the class in the different pages.
Related
I am starting to dive into some PHP on my wordpress and I'm having some trouble
What I am trying to do:
1. add a button to the bottom of each image in an image gallery there are 4 rows and 4 columns
What I have done:
I created a child theme and copied my page.php file to my child them
added a div like this to my my php file: <div class="button"></div>
added the following CSS to my style.css
.page-id-482 div.button{
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 15px;
}
I am stuck as to what I need to do to add a button to each image in the gallery. Every time I change the CSS I cant get the button to move. It currently sits where I placed it in the PHP. I need to change my CSS but I'm not sure how.
See image:
My website is www.rosstheexplorer.com.
I am using the Penscratch theme although have modified many aspects of it.
I recently made a number of changes including making my header and navigation bar full width.
One of the unintended consequences of these changes is now there is a lot of space between the navigation menu and primary and secondary areas.
I used the Developer Tools on Google Chrome and started trying to alter the width, padding and margin of a variety of elements on the page.
The below code was the closest I got to solving the problem. The below only works though if the browser window is certain dimensions. If the browser window is to small then the below code forces the content-area and widget-area to overlap the navigation menu and header.
Is there a way I can modify the below code so it works regardless of the browser window size.
.widget-area {
float: right;
width: 30%;
margin-top: -350px;
}
#primary.content-area {
float: left;
width: 70%;
margin-top: -350px;
}
Or is there another completely different solution?
Change the below css
style.css:1932 #screen and (min-width: 75em)
.site {
max-width: 1153px;
margin: 400px auto; // change this to margin: 5px auto;
padding: 54px 108px;
}
:43 #screen and (min-width: 75em)
.site {
max-width: 1153px;
margin-top: -50px auto; //remove this minus is not recommended
padding: 54px 108px; // change this to padding: 0px 108px 54px 108px;
}
kindly change the above margin and padding
It's much simpler than that:
http://www.rosstheexplorer.com/?custom-css=cedea99283
Line 45: margin-top only accepts 1 property, you specified 2 (50px auto). Just remove the "auto"
Im building my first website and this is first time asking for help. I am unsure of how to position the sidebar widget area of my site in the position I want. Im working on making my the site fully responsive. What I am trying to accomplish is get the sidebar to "hug" the content area so they are always next to each other with a small 20-35px margin in-between them, and as screens get larger I want them to stick together. I came across this website http://uberhavoc.com, I am trying to model my sidebar and content in a similar way. Here is my site: http://peakworthy.com.
my site has the main site content area with two divs, the main content and the sidebar. I tried get the to position how i want using percentage margins, played with clears, clearfixs and everything else. I was wondering if I am approaching this wrong or if the DOM is causing issues with style hierarchy. If you have any ideas I would be greatful. been pulling hair out on this for a couple days now.
You need to place your main content area and your sidebar content inside a container element. Then use media queries to determine a breakpoint for when the sidebar should re-flow.
Below is the basic markup of my suggested approach. The main content and sidebar content are the two siblings of a container element. They are floated left and have a percentage width applied to each. A media query is used to determine when the two columns of content should be side-by-side or stacked.
<main class="cf">
<div class="content">Main Content</div>
<aside class="sidebar">Sidebar</div>
</main>
main {
background-color: #ddd;
min-height: 400px;
}
.content,
.sidebar {
float: left;
width: 100%;
}
.content {
background-color: #ccc;
}
.sidebar {
background-color: #bbb;
}
#media ( min-width: 480px ) {
.content {
width: 70%;
}
.sidebar {
width: 30%;
background-color: #bbb;
}
}
The clearfix and background colors used above are only in place for my demo and can be omitted.
jsFiddle: http://jsfiddle.net/vj9zq0oq/
Re-size the jsFiddle to see the content columns re-order.
I'd try to stay away from float if possible. Try this out instead. The display-block places them side by side and will help with the responsive feature because the sidebar will automatically jump down when space runs out, and text-align:center makes them stay in the middle of the page at larger sizes.
.site-content {
padding-bottom: 4em;
background: #f0f0f0;
text-align: center;
}
.content-area {
display: inline-block;
}
.site-content .widget-area {
width: 380px;
padding: .3em 0 .3em 4em;
background: #ffffff;
display: inline-block;
margin-left: 20px;
vertical-align:top;
}
I want my page's logo and articles to be in the center of the site. At the moment everything is on the left.
I just can't make it work.
For Example I tried to delete the wrapper and set margin-left:auto; margin-right:auto; in the logo's class. nothing works.
And for the posts i just don't know where to start. probably i would have to put everything in a container and make that central? (There should be three posts in a row, at the moment the theme stacks them up to the right screen border if you have a big screen)
Thank you so much.
EDIT: The Text align in the image class did the job. Thank you guys, question answered!
#logobild {
margin-left: auto;
margin-right: auto;
text-align: center;
}
That will do it for you :) Your header takes up 100% of the space, so the content inside has no fixed dimensions to center against. The text-align value assists with that.
Try:
#logobild {
margin-left: auto;
margin-right: auto;
text-align: center;
}
To center the logo you can do the following in CSS:
img {
display: block;
margin-left: auto;
margin-right: auto;
}
The img element is inline by default, which means your margin styles won't be applied to it. When it is set to block level the margin settings will work.
To center the articles I suggest you give a width to the container div like this:
#post-area {
width: 85%;
margin-left: auto;
margin-right: auto;
}
I'm not sure if that's the best way, but it seems to work.
I don't really need help with the code, but I have a question about CSS and PHP. I'm still trying to learn CSS. Please forgive me if I have problems explaining properly.
My website is made up of several .php scripts that always calls from my main include php script. This script contains the header, overall layout, login check, javascript, and scripts that fix errors and log certain stats. This include file calls my style.css sheet. So, every page loads the style.css because every page calls my include file.
Here is my problem.
ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#606a86;
width:125px;
This is for a menu. I haven't used this a lot, because I'm still learning, but that code works perfect for the menu I use with javascript. But, I want to use ul and li elsewhere on my site, but I don't want the same look. Basically, I want to have a different look elsewhere when I use class="". Problem is, if I try add a ul.example or li.example it doesn't work like it does on other tags when using class="".
I've also tried directly adding the css to the page, but it still loads the style I have for the menu.
Note that I have tried giving both separate ids, such as ul.ex1 and ul.ex2, same goes for the li.
Am I just completely lost with CSS, or is there a certain way to do this?
You should bind your ul/li to an element. For example if your menu is within
<div id="menu">your menu</div>
You should have your CSS like so:
#menu ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#menu li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#606a86;
width:125px;
Your CSS selector is backwards. It's tag then classname, i.e. ul.example not example.ul
Check out this quick tutorial.
Your best bet is to give your navigation bar a class and assume all other ul's and li's have their normal state. Then, it will be easy to change those normally on any other pages you create.
Just a note, if you wanted to create a class for ul, you'd use ul.navbar and ul.navbar li, which is much easier than applying the same class to each individual li.
<ul class="navbar">
<li></li>
<li></li>
</ul>
<style type='text/css'>
ul.navbar {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
ul.navbar li {
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#606a86;
width:125px;
}
// all other uls remain normal
</style>