Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Adjusting a class that is in bootstrap.css

Posted on 2014-04-12
10
Medium Priority
?
208 Views
Last Modified: 2014-04-15
Hello

I have a really small request, but what better place to ask it.  Who knows, it might be more complicated than I think!

In my next comment I will put a link to a test site.

There is a drop down menu that is controlled at least initially by bootstrap.css

I of course don't want to touch bootstrap.css

I just want to fix this one little dropdown.

See attached.  

I want it to be higher in the page.   I think I would want a top-margin: -20px;

So how can I do this?

Tahnks!
dropdown.jpg
0
Comment
Question by:Rowby Goren
  • 5
  • 3
  • 2
10 Comments
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39996736
Hi

Here's the link to the development site:

test site

The drop down is near the top right of the page, and needs to be moved up via css -- about -20px

I have a custom.css file....

Thanks for your thoughts and comments.

Rowby
0
 
LVL 35

Expert Comment

by:Dan Craciun
ID: 39996865
You actually need 26px.
Change this in your HTML (line 404):
<div class="pull-right limitbox" style="margin-top: -26px;">

Or, if you want to use the custom.css, give that div an ID and add margin-top: -26px; to it's style.

HTH,
Dan
0
 
LVL 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 1000 total points
ID: 39996944
I would wrap the h1 tag above it in a container div, then place the h1 and form in the same container and float it.  

In bootstrap make each element on the left or right for anything above a small screen and force to two separate rows for a extra small screen.
<div class="row">
      <div class="col-sm-10 col-xs-12"><h1>Pepperdine Tribute</h1></div>
      <div class="col-sm-2 col-xs-12">
                <!-- place form code here -->
      </div>
</div>

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 9

Author Comment

by:Rowby Goren
ID: 39999937
Hello,

After speaking with the developer of the gallery program, he suggested I simply us css to hide the dropdown.

I would prefer that approach, since I really don't need the dropdown and would prefer not to modify his html code.

So here is my slightly adjusted question.

Link to Development page

If I add display:none to the div then it hides it.

select[multiple, select[size] {
    display: none;
    height: auto;
}

Open in new window


But that is in bootstrap.css and I don't want to touch bootstrap.css

The above code is within "div class "event" (I think!)

If that is the best approach, what would I put in my custom.css

Or is bootstrap's pull right {
float: right

....the one the best modify. (Also, of course in bootstrap.css)

For example,

div.event select[multiple], select[size] {
   display: none;
    height: auto;
}
?????

Thanks Rowby  

(Of course will be splitting points.)
0
 
LVL 35

Accepted Solution

by:
Dan Craciun earned 1000 total points
ID: 39999960
Try this in your custom.css:
.pull-right {
display: none;
}
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39999996
Just use your custom.css
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40000119
But won't that affect all of my .pull-rights ?  

That is, any bootstrap ".pull-rights" used elsewhere in the site?

Could it be something more specific such as:

div.event select[multiple], select[size][b] .pull-right[/b] {
   display: none;
    height: auto;
}

Open in new window


Not sure if I got the above correct including spacing before the .pull-right

???

Rowby
0
 
LVL 35

Expert Comment

by:Dan Craciun
ID: 40000125
Then give an ID to that particular pull-right.

Or, better, define a class IWantToHideThis in your custom.css

.IWantToHideThis {display:none;}

and change this in the html:

<div class="pull-right limitbox IWantToHideThis">
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 40001996
Hi

I was able to add this to my custom css
div.pull-right.limitbox {
    display: none;
}

Open in new window


And that got rid of it!

Rowby
0
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 40001999
Thanks Scott and Dan

Thanks for educating me and helping me troubleshoot it!

Rowby
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses
Course of the Month12 days, 6 hours left to enroll

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question