I'm using Wordpress and I currently have installed Tesseract theme on my site: (http:// instantiwebs . com)
I would like to remove left/right margins on everything, like this site did it: http://tyler.com/. It is using also the same theme.
I've looked through the CSS style and can't seem to find the right section to edit. The stylesheet is located here: http://alexardavin.com/instantiwebs.com/wp-content/themes/Tesseract/style.css
Help would be really appreciated, thanks!
Just add this code to the bottom of the stylesheet, it should work for you.
EDIT: Make sure you have the !important statements.
#site-banner {
max-width: 100%!important;
padding-left: 20px;
padding-right: 20px;
}
#footer-banner {
max-width: 100%;
padding: 0 20px;
}
#site-banner-right {
right: 20px!important;;
}
Use the free plugin Wordpress My Custom CSS.
It is light, and for small CSS edits you don't change the theme source code.
It prevents your edits to be overrided when you update.
body .site {
padding: 0;
margin-top: 0;
margin-bottom: 0;
box-shadow: none;
}
try above code
Related
please, I have a problem with terminal simulator. I want show one line in full length without wrapping of course but text (text-align: left of course). It's fine in desktop but if you will smaller the window you will see horizontal scrollbar. I solve this with max-width: 100vw but then scrollbar is still visible below the text. It's for desktop. I think that this is solved. But have you some better ideas for terminal emulator? What library is standard used which can copy your code, etc...? Thank for advice
My html scratch
<div class="terminal">
<pre class="terminal">cd ~
mkdir Projects
git clone https://github.com/zrebec/JavaLearning/ThisIsVeryVeryVeryLongURLPathToDestination/DesignPatterns.git
/zeroscratch.sh init</pre>
</div>
and css scratch
.terminal {
// Layout
padding: 5pt;
border-radius: .5em;
display: inline-block;
// Colors
background-color: $secondary;
color: $color5;
// Text
font-family: monospace;
font-weight: $font-weight-bold;
line-height: $terminal-line-height;
text-align: center;
}
.terminal pre {
// Layout
overflow-x: auto;
margin: -17px; // This is for compatibility with mobile devices
// Text
text-align: left;
}
Don't worry about variables, I'm using Sass for normal programming. But I have some questions please:
It's needed to have negative margin? I read that it's for mobile browser compatibility. And yes, otherwise page is scroll-able which is really ugly. But the question is, existing most modern solutions for terminal emulator?
It's better use <pre> or <textarea> for terminal simulator? Thank you
Full my code is on my codepen
Thanks for any advice
PS: My desire is avoid Javascript or Bootstrap for now. Thank you for understand
Best Regards
If I understood well, please check if this is the behavior you're wanting to happen :
.terminal {
width: 90%;
height: 100px;
padding: 10px;
background: #000;
color: #0f0;
border-radius: 10px;
font-family: monospace;
text-align: left;
}
.terminal pre {
margin: 10px;
padding: 10px;
overflow-x: scroll;
overflow-y: hidden;
}
<div class="terminal">
<pre>cd ~
mkdir Projects
git clone https://github.com/zrebec/JavaLearning/ThisIsVeryVeryVeryLongURLPathToDestination/DesignPatterns.git
/zeroscratch.sh init</pre>
</div>
You had both items with the same class which was conflicting with the browser applying the styling. And if you want the scrollbar to appear only horizontally, just make sure also to hide the vertical bar with overflow-y: hidden;.
Here's a fiddle, so you can resize the window and see it working responsively. Hope it helped!
JSFiddle
I'm a bit of a newbie to programming so posting on here to find some help.
Had a quick question which I'm assuming is easily resolved through custom CSS.
If you check out this post on my WP site you will see the content disappearing through the header.
Can someone please advise what piece of CSS has made this happen and what element I need to alter to set a regular margin?
Thank you,
The line that is causing you trouble is this one:
h1.entry-title { /*spacing to position entry title dimensions & font styles*/
margin:-2em 0em 0.5em 1.5em;
text-decoration: none;
font-size:2.8em;
display:block;
position:relative;
color:#474747;
}
It comes from a blog css file as "http://www.beendorsed.com.au/blog?sccss=1&ver=4.3.1".
In that line, when you comment out the line "margin:-2em 0em 0.5em 1.5em;" (like this: "/* margin:-2em 0em 0.5em 1.5em; */"), all will go back to normal.
To add that style to one set of pages only ("blog posts", for instance):
If you need that margin on one page, or one set of pages (like blog posts), add a class to it, like .post, and in the css file add it too, like this:
.post h1.entry-title { /*spacing to position entry title dimensions & font styles*/
margin:-2em 0em 0.5em 1.5em;
text-decoration: none;
font-size:2.8em;
display:block;
position:relative;
color:#474747;
}
When you add posts (instead of pages), you'll see that the articles are classed as ".post" (probably), just like the ones you are currently seeing are ".page". (I'm guessing the class name. Test it, see what the actual class name is, and use that). Here you have the line that states that class:
<article id="post-21" class="post-21 **page** type-page status-publish hentry">
Try to modify margin value in you .post declaration.
.post {
max-width: 640px;
margin: 130px auto 0px auto;
font-size: 16px;
}
Line 1804 in your style.css file
If you want to apply this just to on, specific page then do:
#post-104 .post {
margin-top: 130px;
}
You could change the #primary definition to be
#primary {
float: right;
width: 66.6666%;
margin-top: 100px
}
adding the margin-top there. You should get used to identifying the elements in a debug session in the browser to help you understand which element you are targeting.
Note that as I went through your CSS, I saw that you have some merge artifacts in the CSS, things like
>>>>>>> Another_Merge_test
which are not helping things for you.
I switched over last year from cargocollective to squarespace. I'm happy with a lot of the things sqaurespace allows for. But not having access to the actual code makes customization so much more confusing for me as a novice. I tired inserting a bunch of different things into the custom CSS with no luck.
I've been playing around in the inspector element and was able stretch the gallery across the screen however I've had no luck actually accomplishing it through squarespace!
Any help in achieving this would be greatly appreciated! http://www.vernacularstudio.com/work/
I ended up fixing it by inserting this into the custom CSS in the Design section
The difficult part was just isolating out what the actual div element I wanted changed was I suppose.
#block-yui_3_17_2_17_1431527054679_7625 .sqs-gallery-block-grid element.style {
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
max-width: 100%;
}
.content-inner {
background-color: #fff;
max-width: 100%;
margin: 0 auto;
padding: 100px 8%;
padding-left: 0px;
padding-right: 0px;
}
I'm just trying to make the cursor a custom image. I have followed all instructions everywhere but it still will not work:
CSS:
body, html {
margin: 0px; padding: 0px;
border: 1px solid red;
cursor: url(images/rsz_red_crosshair.gif), crosshair;
}
The image is 32x32. The stylesheet is linked properly because the border is showing. The second option (the built in crosshair) works fine. Just wondering what I'm doing wrong, I'm sure it's fairly obvious to others.
Your style syntax is correct and I've implemented it myself just to be sure. I would confirm the location of your image.
This css should solve your problem. Include the URL in quotation mark and make sure path is correct.
body {
margin: 0px;
padding: 0px;
width:100%;
cursor: url('http://icons.iconarchive.com/icons/hopstarter/plastic-mini/32/Cursor-icon.png'), auto;
}
Please visit this website.
There is a blank space at the bottom. I checked it and there is no minimum height mentioned in my css.
I suspect it's in the body's css details as below:
body {
line-height: 1.5;
font-size: 87.5%;
word-wrap: break-word;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
border: 0;
outline: 0;
background: none repeat scroll 0 0 #EFEFEF;
}
html, body, #page {
height: 100%;
}
This removed the bleed for me in Safari 6.0.3;
#footer-wrapper {
margin-top: 40px;
background: url("../images/footer.png") repeat-x scroll 0 0;
overflow: hidden;
}
You might want to handle that overflow differently tho, based on the content inside it. But this should fix the white space.
I figured it out by just deleting nodes from the DOM bottom-up. It had to be in the #footer-wrapper. As margin-bottom didn't work and you were using relative positioning I figured it was some shadow styling bleeding out of that element.
Update (better fix)
Just found the real issue to the problem;
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Change content: "."; to content: ""; and it's fixed. Or just remove that style at all, as it doesn't seem to have use in that case.
"overflow: hidden"
makes things harder but try,
"overflow: auto"
in order to be able to flow when you need.
I'm late to the show here but it may help somebody in my case I had an empty space at the top I added the margin-top=-20px now the empty space at the bottom, tried almost all suggestions I found on these and many threads and nothing. Decided to run it thru some HTML validator there are a few none of them pick up but after a couple one found an extra character(`) at the end of a tag, and that was it, so it was user clumsiness, took that thing out now my page was shifted, took the negative margin and all good. So try a validator and look for something like this.
margin-bottom: 0px;
This would do it
Btw ..nice site dude :)
Sometimes, it's some iframes/objects that are created by third party services that create this blank space. In my case, Google Adwords and Google Analytics was creating this. So, I removed by adding this CSS:
object[type="application/gas-events-cef"],
iframe[name="google_conversion_frame"] {
display: none !important;
height: 0 !important;
width: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
margin-top: -13px;
float: left;
}
Maybe you will need to add some extra rules for your case. Hope that helps.