I've been trying to remove the white space behind my header. FYI, I've set the Header Bakcground to transparent, but certainly the main (body post) background still looks white.
If I change the main background to transparent, which will make the header turns clear, the body post will obviously turn clear as well. But I only want the header to be clear.
I tried the trick from here: http://www.blogdesignsbydani.com/2013/02/how-to-make-your-own-custom-blog.html (Step 5-6) about last year. But I can't apply the same trick with my current blog: http://silvertreasure.blogspot.com.
Can anybody take a look and see what's wrong with my blog this time?
You might have to move your tabs-outer div outside of the main container to achieve the look you desire. I can only guess that you want something like this because your description is not clear and the right click block on your blog would not allow me to perform edits more than once. See the attached picture to see how if it should look like this.
You can then proceed to adjust your widths and background-colors to match your needs.
If all you're trying to do is move the main content down below the menu, do this:
.fauxborder-left {
margin-top: 20px; /* or whatever */
}
You may also need to apply it to .fauxborder-right.
Related
I want to know that how can I reduce the space gap after the header of the blog. Let me be specific, The space gap after the header menu and before the main content body.
I don't really have too much CSS knowledge, but after looking at the massive CSS code of the theme, I was a bit confused and decided not to play with the code. So, a little help needed here.
Link - Thats Breaking
Theme - Newspaper
Blog platform - WordPress
Let me know if I missed any info.
what you are trying to do is set the margin or padding of the header or the body.
You can either use padding or margin, depends on the visual effect you want to get.
margin
padding
To get faster results, you can:
In the web page you linked righ-click on the body container you want to change the space gap
Look for this in the css code inspector:
td-main-page-wrap {
padding-top: 48px;
}
Notice that the withe space is set with that attr.
For example, if you change that in the inspector from 48px, to 0px, automatically header and body content gaps together.
After that you shall change it in you css code. search for td-main-page-wrap.
You can change top, bottom, right or left Margin and Padding too.
Take care if you modify the css of the template, because the class or elements will probable be used in different views. Just in case you see all broken :p
I'm having trouble with my code with my CSS stylesheet and HTML index coding. I only have one problem and that is my CSS stylesheet isn't letting me place a div class into it. I'm using the free Brackets software which includes syntax highlighting and it's coming up red which is an error. Here is a picture of it:
http://i58.tinypic.com/ju97cl.png
As you can see in that picture, I've boxed around the place where it's disallowing me to place the div class into the stylsheet in white. I've given a working example with the blue box so I'm confused to why it's doing this.
My main question for you today is how do I create buttons directly in the center on the side of my page with CSS or however possible and how to edit these buttons like adding hover animations, visual looks etc? (I'm new to this by the way) Also, I want to lock the scrolling of my page in a certain area like in the picture described:
http://i62.tinypic.com/wmbyw.png
Lastly, I wish to ask how to make my content on the white area transition by sliding to the side for when I click a button to go onto the next page. However possible I would really appreciate if somebody gives me the time for this. Sadly I can't give another image because I don't have 10 reputation. so I hope you can make out what I'm trying to say.
I will be so grateful to anyone who helps me with this.
First off you need to close your .right-menu class with a }.
For effects and animations check out w3schools:
http://www.w3schools.com/css/css3_transitions.asp - transistion property
http://www.w3schools.com/css/css3_animations.asp - animations
Centering in CSS can be done with text-align: center or margin-left:auto; margin-right: auto.
To prevent scrolling of the body do body {overflow:hidden}
For sliding page content refer to my links above or checkout jQuery
http://www.w3schools.com/jquery/jquery_slide.asp
I'm new to Sharepoint, so I'm having difficulty with some basic stuff. I've already posted this to the SharePoint StackExchange, but I thought I'd try my luck here as well. Let me know if what I'm doing is wrong, and I will remove my post from here!
My end goal is to basically make something that looks like this.
You can see what my current page looks like on the first image of this link. On the second image of that link, you can see how the layout looks in Sharepoint. As you can see, it's just a bunch of content editor web parts with html/css in them. I apologize for making the image pretty zoomed out, but in case you can't see there is a header section, a top-left section, a right section, a center-left section, a center section, and a center-right section.
There are a few things I need to change to my current page to make it look like what I want.
I need to make the paragraph expand the width of the paragraph at the top (I want the width for the header section to reach all the way to the end of the last blue box on the right)
I'm having trouble fixing the Right section of the webpage. I needed to use a lot of margin-top on the first blue box in that section in order to line it up with the rest of the boxes. But, as you can see from the third image of the link, there is an issue when I zoom out, which makes me think that it will not look right on different sized screens.
Last, and the part I'm having most difficulty with, is changing the color of all of these boxes to white and then putting them inside a blue background. I'm trying to make it look that first link, where I have a heading with a paragraph, and then the boxes underneath that paragraph are all inside a blue background. I am not sure how to go about doing this considering that they are all in different web parts so I wouldn't really know how to put them all inside a container.
This is what the code looks like for the boxes if it could be of any help, it basically just looks something like this:
<!-- Large Box -->
<div class="largeBox"></div>
<!-- Small Boxes -->
<div class="box"></div>
<style>
.largeBox {
width: 800px;
height: 250px;
background: rgb(0, 122, 201);
}
.box {
width: 250px;
height: 250px;
background: rgb(0, 122, 201);
}
</style>
And that's pretty much it except for very slight margin-left and margin-right to align some of the boxes.
Sorry again if I'm asking for way too much, I'm just very new to Sharepoint and it's taking me a bit of time to get used to it. Any help would be very much appreciated.
So I apologize in advance if this question has been answered before- I tried searching but couldn't find much on it.
A designer and I are working to create this website- www.zeinal-jundi.com
This is predominantly a one-page layout using a scroll effect to navigate to different sections, although the site's Discography section does link to a separate page for each album. We also have a fixed header that allows the navigation to be visible the whole time. Originally, I had added a margin to each section of the page to accommodate the height of the fixed header. This however made the space between each section far too large, so my designer requested I find a way around this. I was able to fix it by instead adding a value to the scroll animation script that brings the section around 250px from the top, rather than to the overall top of the page (where it would then be covered by the fixed header)
So now, I've of course encountered the issue of linking to these sections from off another page- using code like the following:
Biography
This of course links back to the front page, but brings the section up to the very top, where it is hidden by our header. I'm wondering if anyone knows of a way I can link to this section from another page but add an action similar to the one I have on the scrolling function that will bring it up to 250px down from the top of the page rather than the very top without me having to add margins to each div.
Another option of course it to just make that pesky fixed header a lot shorter, or possibly hide the site title after the page scrolls to a certain point, but our client seems pretty adamant about having the entire header visible throughout, so I of course am trying to find a work around so we won't have to rethink the entire element (if such a solution even exists).
I hope I explained this well enough! Let me know if you need to see any additional code- would love to hear your thoughts on how to achieve such a thing! :)
If you're placing the block through CSS, you can use the CSS3 :target pseudo selector to position whatever section the link pointed to, e.g.:
:target {
/* ... example:
top: 250px;
*/
}
Here's the code http://jsfiddle.net/4XSjz/
I've basically copied the same info from the h1 header that I created where it works, when changing that for the h4 tag and the footer it doesn't. Is it because I have too many elements? I want it to stick to the bottom too, which I've managed to do and I can see the edges of the ribbon just not the middle part.
Thanks
PS: I just realised I Had no background colour - ok that's fine, then I want to have the ribbon without the cut away parts and to overlap upwards not downwards?
Elaboration : Ok so I have the ribbon in the code above, with the background colour given a colour it will create the appropriate background colour for that ribbon creating the css ribbon.
What I would like to do is keep the ribbon but remove the cutaways the triangles essentially. Then I want to have the overlap where its darkest colour and have it above the rectangle.
Something like this:
/_/________________\_\
/-----------------------\
I hope that clarifies it somewhat
Maybe try and replace the h4 in the CSS with .footer - it refers to the class, not the object.