So I am using bootstrap together with slim to build some navigable pages. Am stuck on highlighting the selected item on the list as "activate" class applied. I did find something called affix or scrollspy but these are different from what I need to do, which is to navigate among pages. I have following code piece:
.container-fluid
.row-fluid
.span2
ul.nav.nav-list
li.active = link_to 'Home', root_path
li.divider
li = link_to 'Openings', openings_path
...
.span10
==yield
I believe there should be some best practice on this. Any suggestion would be appreciated.
If you are creating pages dynamically, then you can often use your framework to add an active class to a menu link. I'm not experienced with ruby on rails, so I can't give you much help there.
There are lots of other ways to achieve the same goal though. For exammple you can add classes to the body tag of your various pages, tweak the HTML for your nav list items, add your CSS styling and you are good to go.
HTML
<body class="home">
or
<body class="contact">
<ul class="nav nav-list">
<li class="home"> <a href="#">home</li>
<li class="contact"> <a href="#">contact</li>
</ul>
CSS
.home li.home a, .contact li.contact a{
background-color#999;
color:white;
}
or if you want to go with the built-in Bootstrap active styling,
something similar to this:
.home li.home a, .contact li.contact a,
.home li.home a, .contact li.contact a:hover,
.home li.home a, .contact li.contact a:focus {
color: #555555;
text-decoration: none;
background-color: #e5e5e5;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
You can use this approach for both dynamic and static sites.
Hope this might get you started!
Related
I'm learning robot framework since a couple of weeks, and I have the next situation while making a robot with a real case:
I have a value of the id of a company, and with it, I need to locate the button with that info which is inside of an accordion on the website, the accordion button list is totally variable and can have one or various items
for context, the part of the site is like this:
<div class="accordion ui fluid"><div class="item" style="background-color: white; margin: 1rem 0px; border-radius: 10px;"><div class="title accordion-title"><i aria-hidden="true" class="dropdown icon"></i>Accordion 1</div><div class="content" style="padding: 1rem; background-color: rgb(238, 238, 238);"><div class="persona-btns"><div><button class="ui primary button">Accordion1 op1</button><button class="ui primary button">Accordion1 op2</button></div></div></div></div><div class="item" style="background-color: white; margin: 1rem 0px; border-radius: 10px;"><div class="active title accordion-title"><i aria-hidden="true" class="dropdown icon"></i>Accordion2</div><div class="content active" style="padding: 1rem; background-color: rgb(238, 238, 238);"><div><button class="ui basic button" style="padding: 0px; box-shadow: 0px 0px 0px 0px; margin: 0px; text-align: inherit;">*id number of a company* *variable text(name of a company)*</button></div></div></div></div>
I tried with a
Click Button //button[.//text()=*id value*]
but in that case, doesn't find anything, and just comes with an error
and the other option, is to use a Get WebElements Keyword, with the container of the buttons, and that lists the webelements but without a direct way to make it match the text value:
[<selenium.webdriver.remote.webelement.WebElement (session="3932a0dd61c3018f5ede7ca31ea475b1", element="59b4ad4d-3410-4e95-b1e5-3d02e07d1894")>]
so I need to find a way make the framework identify the element with the text, or in the WebElements option, to get the text of the html and get the data to make it clickable with the Click Button Keyword
Looks like id value is not the exactly text content value of any text node inside that button.
So, instead of this //button[.//text()=*id value*] please try this XPath expression
//button[contains(.,'*id value*')]
So, the entire command line will be
Click Button //button[contains(.,'*id value*')]
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>
I am using twitter bootstrap 3 with horizontal forms and form groups in my ASP.Net MVC razor app:
<form action="SomeAction" class="form-horizontal" method="post">
<div class="form-group">
<div class="col-lg-3 control-label">
#* label *#
</div>
<div class="col-lg-9">
#* textbox *#
#* validation *#
</div>
</div>
I also have the following in my layout template because every view will be a form and I don't want to have to style every control or view separately:
$('input[type=text]').addClass('form-control');
With text inputs, this is what I get:
The first 1-2 characters are hidden until I click in the control, which then shows them:
I am using IE 10. It doesn't happen in google chrome:
Not sure how to resolve this so any help is appreciated
I found out what was causing it. I have the following javascript in my _Layout.cshtml view:
$('input[type=text]').addClass('form-control');
Once I removed it and applied the class in the control it rendered properly:
#Html.TextBoxFor(model => model.Manufacturer, new { style = "width: 400px;", #maxlength="50", #class = "form-control" })
Text inputs seem to be the only one with this problem. textarea and select don't have the same behavior.
I wanted to avoid having to put the bootstrap class in every single control in every single view. If anyone knows of a better way please let me know.
Update
It turns out the padding style (12px) in the bootstrap.css (version 3.0.0, line 1712) is causing the problem:
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px; /* this line is causing the problem */
font-size: 14px;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
Hate to alter the bootstrap css. I am overriding it temporarily in my _Layout.cshtml view:
$('input[type=text]').addClass('form-control');
$('input[type=text]').css('padding', '6px 0');
I'm developing my website, but I'm having a little problem. On my computer I can see the site like I want, but when I see in my notebook, a content is very to right! In my computer is normal. I'll have the site for you to see. It's in Portuguese, because I'm Brazilian. But please give a look at the source code. Or better, I will pass the code for you. The CLASS of the content of the right is: content-inner-jogo-destaque
And this is the code:
CSS:
.content-inner-jogo-destaque
{
position:absolute;
top:15px;
right:15px;
width:200px;
background-color: #ffffff;
padding: 10px 10px;
-webkit-box-shadow: inset 0 0 10px #1f325d;
-o-box-shadow: inset 0 0 10px #1f325d;
-moz-box-shadow: inset 0 0 10px #1f325d;
-ms-box-shadow: inset 0 0 10px #1f325d;
box-shadow: inset 0 0 10px #1f325d;
border-left: 3px solid #eeeeee;
border-right: 3px solid #eeeeee;
border-bottom: 3px solid #eeeeee;
border-top: 3px solid #eeeeee;
}
HTML:
<body>
<div class='content-inner-jogo-destaque'>
<p>Jogo da semana:</p>
<a href="testando"><img src="imagens/semana1.jpg" title="Clique para ir para a
página do jogo da semana" style="width:200px"/></a>
<font size="3"><font face="verdana,geneva">Dragon Ball Z Budo<font size="3">kai Tenkaichi 3</font></font></font>
</div>
</body>
Well, here is the site: www.ganggames.p.ht
Please take a look and tell me if something wrong.
Can I use CSS to change the pixels of the site?
Or a metatag?
Can you help me?
Thanks! :)
I have 3 things for you:
1) I think the main reason why your content is showing up on the right side of you page is because your content is set to "position: absolute" then you are telling it to stay 15px from the right of the page. That means that no matter how big or small your screen is, that DIV will ALWAYS be 15px from the right of the page.
You can keep the code you currently have if you wrap all of your content in a DIV with a set width:
<head>
<style>#wrapper {width: 'whatever-your-content-width-is';}</style>
</head>
<body>
<div id="wrapper">
<!--ALL OF YOUR CONTENT-->
</div>
</body>
You can also now neatly center all of your content if you would like with (optional):
<style>body {text-align: center;}</style>
2) For cross device compatibility, it is the standard for helping with viewing issues is this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Further research of that tag can be found here:
https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
3) Double check all of your BODY, HEAD, FOOTER, etc, tags! They aren't executed properly.
Hope this helped!
This button is before CSS Sprites
<input type="image" src="/images/search-button.png" value="" id="search-button">
I'm trying to implement CSS Sprites with one of my search form and the problem is that if I use
<input id="search-button" class="sprites1" type="submit" value="">
it will look something like this.
As you can see the image on the right doesn't look right, but it is click-able.
Then I tried with
<span id="search-button" class="sprites1"></span>
Then it looks right! But!! I can't click on it.
So here is my CSS sprites code.
What I have to implement to get it look the one I want and I can click on it?
.sprites1 {
background: url('result.png');
}
#search-button {background-position: -0px -462px;
width:16px; height:16px; float:right; }
The problem here is the default css that the browser uses on elements. You should try resetting that css. I often use the following snippet:
/* reset css of buttons */
.cssresetbutton {
border-width: 0px;
border-style: none;
background: inherit;
font: inherit;
color: blue;
padding: 0px; }
.cssresetbutton:active {
border-width: 0px;
border-style: none;
background: inherit;
outline: 0;
box-shadow: none; }
try adding the cssresetbutton class to your input element and see if it works.
EDIT:
You can also try not using a input[type=submit] element. For example:
<span id="search-button" class="sprites1" onClick="document.getElementById('formid').submit()"></span>
It will submit the form#formid element when clicked.