Bootstrap: is it possible to add title block in html/css code? - twitter-bootstrap-3

I'm using a CMS theme that contains all of Bootstrap 3. Is it possible to add a title block manually in HTML/CSS? I'm not sure if that's the block's official name... it's the purple full-width block containing the text:
CSS
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
in the following link (for example):
http://getbootstrap.com/css/
This title block is built into my theme and is available based on the design for the page I select.
But I was wondering if this block is available separately from Bootstrap, like a Navbar, panel, well, etc. component, that I can just include some HTML/CSS code and have it appear in the body of a page, for example.


No it's not in bootstrap but it's pretty easy to grab the style and use it anywhere:
.bs-docs-header {
font-size: 24px;
padding-bottom: 60px;
padding-top: 60px;
text-align: left;
}
.bs-docs-masthead, .bs-docs-header {
background-color: #6F5499;
background-image: linear-gradient(to bottom, #563D7C 0px, #6F5499 100%);
background-repeat: repeat-x;
color: #CDBFE3;
padding: 30px 15px;
position: relative;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
check this jsfiddle


If you look at their source, they are using a stylesheet called docs.min.css, they have defined the background in here. Other then that it is just a simple <div class="container"><!--title and subtitle here-->. So the answer is a yes and a no. You can, of course, use containers seperately from your CMS when using bootstrap, but the background will not be available unless you strip it from the getbootstrap.com source.
Edit
If you see their styles, they are using this code in their docs.min.css:
#media (min-width: 768px)
.bs-docs-header h1 {
font-size: 60px;
line-height: 1;
}
}
This means, when the width of your window is above 768 pixels, it gives the h1 a font-size of 60px. When you fall under it, this code is ignored and the default bootstrap font-size is being applied.
Edit 2
To get a background-color behind it, don't apply the background color to the .container. wrap a div around it without a width value. The container width is not full width, so if you apply a background to it, its only behind the container that is centered.
Edit 3
A simple HTML structure would be something like this (you still have to include all bootstrap styles and default html tags etc.
<html>
<body>
<div id="bgColorDiv">
<div class="container">
<h1>My title</h1>
<p>Paragraph below the title</p>
</div>
</div>
</body>
</html>

Related

Where does <style id="shopify-dynamic-checkout"> come from and how can I override it?

I am styling a Shopify site for the first and using the Minimalist theme as a base. I want to style the shopify-payment-button (But it now) button but have not been able to. I noticed looking that the page source code there is:
<style id="shopify-dynamic-checkout">
.shopify-payment-button__button--hidden {
visibility: hidden;
}
.shopify-payment-button__button {
border-radius: 4px;
border: none;
box-shadow: 0 0 0 0 transparent;
color: white;
cursor: pointer;
display: block;
font-size: 1em;
font-weight: 500;
line-height: 1;
text-align: center;
width: 100%;
transition: background 0.2s ease-in-out;
}
//etc, etc
being injected into the <head> which is overriding my styles. I can't find where this comes from to remove it. Would anyone know how?

Shopify injects styles and js for some elements on site inside {{ content_for_header }}, which you will find in theme.liquid file.
This tag contains default shopify files as well as files for some integrations and apps. For example if you install facebook pixel through shopify, the code for it will go to {{ content_for_header }}
It is not possible to control what goes to this tag directly. If you just need to change styling then I recommend to just overwrite styles, in worst case if you need to, use"!important" tag in css

CSS full page width header

Hey I have a little problem I have a full page header but when I zoom in or reduce the screen size and slide along. It is not full page width it just leaves white space. May css code goes a follow.
.header {
background:#242424 repeat-x;
color:#ffffff;
width:100%;
height:74px;
font-family: 'Karla', cursive;
font-weight:bold;
font-size:15px;
}

The problem is caused by your <div class="medium-cont"></div> tag.
You are setting its width to 1400px in CSS which is causing the problem.
You don't need to use this element, instead set the background image of .medium-back.
<div class="medium-back">
<div class="register"></div>
<div class="medium-cont"></div> <!-- Remove this line -->
</div>
Change your .medium-back style to this:
.medium-back {
background: #19D89B url(images/medium-content.png) no-repeat;
height: 475px;
margin: 0 auto;
}
Then remove any other width:100%; styles you have on the outermost elements.

Trying to align text with background image. If below a certain resolution the text to the left moves in. How can I fix this?

Here is the css code I am using:
#wrapper{
position:relative;
width:950px;
margin-left:auto;
margin-right:auto
}
#content {
text-align: left;
padding: 0px 25px 0px 25px;
margin-left: auto;
margin-right: auto;
position: absolute;
left: 50%;
/*half of width of element*/
margin-left: -450px;
height: auto;
}
And this is the site: http://projectstratos.com/31-01-11/
Please ignore the social icons and the height issues.
To see what I mean make your browser smaller and bigger. The text moves to the right while the background image stays centered. How can I fix this?

I don't believe there's an actual 'fix' for the problem you're presenting.
When you say that the text 'moves to the right' in reality- the text is not moving at all.
Your background image is just trying to maintain itself in the center of the horizontal axis- which you're changing.
For example.. If you got Bungie's website http://www.bungie.net/Projects/Reach/default.aspx and you perform the same action. You'll get the same 'effect' that you are. The only difference is that the background of the text in their website isn't a part of the background image.
Here's what you need to do in order to 'fix' you're problem.
Separate the background (planet, space, etc..) from the logo, purple box etc.
Keep the space, planet, etc.. in the same spot as the background image that's there now.
Take the purple box and put it in it's own div that wraps around all your content
You're code will look similar to this:
<body>
<div id="purpleboxbackgroundimage">
<div id="contentandtext">
<h1>jhkljhlkjhlkj</h1>
</div>
</div>
</body>
I hope this helps.

CSS problem box-shadow with vertically rendered text

I have some text rotated 270 degrees, which I would like to apply the -moz-box-shadow/box-shadow/-webkit-box-shadow CSS propert to. Unfortunately, the browsers all render the box shadow as if the text block element has not been rotated (i.e the shadow position is 90 degrees away from where it should be as if in standard left-to-right rendering)
Is there a way to overcome this problem?

This works for me. Can you post your code so we can see what you're doing? (For example one thing you could be doing is setting your transform - rotate on a span element but setting your box-shadow on a container div.)
Here is some webkit code that works:
#RRottatte{ -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(270deg);
width: 100px;
height: 100px;
top: 300px;
left: 200px;
-webkit-box-shadow: 6px 6px 0px red;
}
</style>
</head>
<body>
<div id="RRottatte">My Rotated Text</div></body>
</html>

You are probably applying the box shadow to a parent container (which is not rotated), you must apply it to the container which has the transform, i.e:
http://jsfiddle.net/QK9wG/

Webkit choking on rendering multiple text-shadow & box-shadow values with webkit-transition

CSS3 -webkit-transition is choking on multiple box-shadow values and text-shadow values. (Chrome & Safari)
More specifically, I have two scenarios...
I have text has a document heading that has three text-shadows (for appearance of depth). I am also using the -webkit-transition rule to change the color of the text-shadow on hover so that it appears to glow on hover.
I have links which I'm using the box-shadow rule on in the same way as above, with three values for depth effect. Also using -webkit-transition here to change the color of the buttons and text for a hover effect.
The Problem: For both instances above, when hovering over the elements webkit appears to render the transition as one at a time, so the values don't all fade into their new values simultaneously. Instead, they appear as each one is rendered - one after the other, and it is a very awkward transition as you'll see.
I have several instances, and here are links to some of them:
(make sure to view in Chrome or Safari)
-Text-shadow transition on :hover for page h1 ("GIFT of HEALING" text): http://cure.org/goh
-Box-shadow transition on :hover for 1st slide call to action ("Read More" button): http://cure.org
-Box-shadow transition on :hover for footer nav links (About, Rods, etc): http://tuscaroratackle.com
Finally, here's a sample of the code I'm using:
(Not from any site, just an example I built for this question; see it live here: http://joelglovier.com/test/webkit-shadow-transition-bug.html)
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
ul {
overflow:hidden;
width:500px;
height:auto;
margin:50px 100px;
background:rgba(0,0,0,.4);
border:1px solid rgba(0,0,0,1);
-webkit-border-radius:10px;
-webkit-box-shadow:inset 0px 0px 5px rgba(255,255,255,.5),0px 2px 10px #6e5e4c;
-webkit-transition:all .5s ease;
}
ul:hover {
-webkit-box-shadow:inset 0px 0px 10px rgba(255,255,255,.5),0px 2px 10px #92d400;
}
li {
display:inline-block;
}
a:link,a:visited {
float:left;
display:block;
padding:6px 10px;
margin:10px 20px;
font:bold 18px/22px Tahoma,Helvetical,Arial,sans-serif;
text-decoration:none;
color:#000;
background:#92d400;
-webkit-border-radius:4px;
-webkit-box-shadow:inset 1px 1px 0px #b7f52f,0px 4px 0px #5c8500,0px 3px 10px #000;
-webkit-transition:all .5s ease;
}
a:hover,a:focus {
background:#198c45;
-webkit-box-shadow:inset 1px 1px 0px #1ac65c,0px 3px 0px #046228,0px 3px 10px #fff;
}
a:active {
position:relative;
top:1px
}
</style>
</head>
<body>
<ul>
<li>link 1</li>
<li>link 2</li>
</ul>
</body>
</html>
So the question here really is is there any way to prevent that ordered rendering, such as using different syntax in my CSS? (such as a specific order of the multiple box-shadow values, or using multiple box-shadow declarations instead of adding them all into one rule?)
05/09/2011 UPDATE: The bug has been reported to Webkit (see Husar's comment below). Also, I see that recent builds of Chrome (specifically my current 10.0.648.205 version) is rendering a smoothe transition now, effectively eliminating the bug. Safari however (version 5.0.5 (6533.21.1)) still displays the buggy rendering.

Apparently this is just a bug with webkit rendering, and there is no apparent fix.

I've also noticed that when you use jQuery, for example, to simply fade text in or out, WebKit "hiccups." So basically, I'm going to go out on a limb and say that I don't think your particular styles have anything to do with it. I could be completely wrong. If you find out what the deal is, I'd love to hear a solution because I too have run into this annoyance a time or two.

this could help to fix this problem on rendering for hovering events
-webkit-transform: translateZ(0px);
-moz-transform: translateZ(0px);