I'm having some problems centering my logo in my Omega subtheme. When viewed in "inspect element" (Google Chrome) there's no other CSS being applied to my targets. My branding region stretches the full 12 grids across the page. I don't quite know what I'm overlooking.
Let me know if you need any of the HTML. Below is the CSS I've used:
.branding-data {
width: 960px;
background: #333;
height: 50px;
}
.logo-img.center {
display: block;
width: 200px;
margin: 0 auto;
background: #ccc;
}
For anyone suffering with a similar problem, I record unto the annuls of the internet the solution that I found:
If you don't already have Delta installed (recommended whenever using Omega), do it.
Before you begin, it's best to have your logo be the same size as an even number of Omega's vertical grids. (mine is two).
Since Omega's default logo isn't in a block, the best way to mess with the logo's settings is to use Delta Blocks (admin/config/user-interface/delta-blocks). Check "Logo".
Then go Admin your Blocks, and add the "Logo" block to the "Branding" region.
Go into your Omega theme's zones administration (under "Appearance"), change the region's size to the number of columns your logo is (two in my case), and set the correct suffix and prefix (5 before, 5 after for a logo of 2 grids).
In "global.css," select the branding region, and center the text (code is as follows):
.region-branding {
text-align: center;
}
Then, insure that no float is applied to the logo image, and that it has margin: 0 auto
.logo-img {
float: none;
margin: 0 auto;
}
If it doesn't work the first time, remember to always clear your caches before freaking out.
Credit for helping me find this fix goes to the user "banghouse" on the #Drupal IRC channel.
Hopefully this helps someone.
Related
I'm running Salient 9 theme on wordpress and I'm trying to have a full width 2 column portfolio with no luck.
I managed to have a 2 column portfolio using this custom CSS
.portfolio-items .col.span_3 {
width: 47.6% !important;
margin: 0px;
padding: 0px;
}
but that does not work in full width.
There also seems to be some conflict with my row settings.
If I set the row to "full width content" it is displayed in a very weird fashion, with a narrower background and images spanning out of it.
To display it correctly I have to set the row to "full width background", but I guess that's what is preventing me to have the 2 column portfolio spanning from side do side.
At the moment I've set the page up so that it's totally clear what I mean if you visit it. http://trunkstudio.it/work/
I'm also attaching a screenshot of the page when I try to set the row to full screen content.
The layout for those items looks like it's using JS to set the width/position of the images, possible masonry/isotope.
You'd need to override the inline styles, like: (and I shudder to use important)
.col.span_3.element.one-fourths {
width: 47.6% !important;
position: relative !important;
top: auto !important;
left: auto !important;
}
I managed to fix it a bit differently with
.portfolio-items .col.span_4 {
width: 49.6% !important;
margin: 0px !important;
padding: 0px;
}
We use a custom template page in wordpress for a narrow width page. My goal is for it to appear as 600px wide + padding of 50px on each side (or so).
This is an example of a page that works on both desktop and mobile:
[edit: removed link]
This is the page with an issue: [edit: removed link] -- it looks correct on desktop, but on mobile isn't scaling down the width. I've tried removing what I thought were likely culprits: the youtube video, reuploading all images w/ 600px width (instead of wordpress resizing), and still having trouble.
Thank you.
Start with this:
Line 6 of main-41ab33da.css
Change "inline-block" to "block", like here
.page-template-template-narrow .narrow-landing-page {
background-color: #fff;
display: block;
padding: 0 25px;
}
Next, add "max-width" to form (see code) and yellow block (inline styles, as you don't have any selector for it)
#lead-capture {
max-width: 100%;
}
Finally do same for youtube iframe you have and you're good
iframe {
max-width: 100%;
}
Simply put I have this page:
http://www.constantinos.org/portraits/
Each set of thumbnails is a NextGen Gallery and I want to make the galleries break lines if needed so they are not forced to appear as blocks in one line and the galleries will be next to each other instead of one per line.
An image is worth a thousand words so I photoshopped an example of I'd like to do:
http://constantinos.org/example/Screenshot%20from%202013-06-29%2018:01:23.png
this is my CSS for those sets of thumbnails:
#ngg-gallerySingleGallery {
float:left;
display: inline !important;
clear: none;
width: auto;
}
.ngg-gallery-thumbnail img {
background-color: #FFFFFF;
border: 0;
display: block;
margin: 4px 0px 4px 5px;
padding: 4px;
position: relative;
}
Pfff. is doing my headings.. Anyone has any suggestions?
Ok. so the problem is that you have your images grouped by threes in ngg-galleryoverview divs. So, even though they are floated, (both the images and the ngg-galleryoverview divs), your images will always be grouped in threes (You may need to review the box model a bit).
I don't know about how the galleries function—and this may be required markup for them to work properly—but that's why your images aren't flowing the way you want.
In fact, if you make your browser window really wide, you can see that the next three images will jump up to the first line.
So, I guess your best bet would be to place all the images into one gallery, rather than several smaller ones.
I have a website in which I want to change the space between some elements. I don't know much about CSS. I am a newbie to it. You can see the website here.This is now on a temporary domain name : timepasssite.hostoi.com.
I want to reduce the space between logo and main menu1...Home..Add a Listing..I have to move it up by a small distance.
I also want to move the search box up in the line of the Main Menu1.
I want to move up the Featured Listing up near the earth's photo 4 px distance should be enough. Listing Categories move Up close to Featured Listings 2 px distance..
Can anybody guide me how to do this ?
Here are the Common.css and Style.css files..
Download Common.css Style.css
Image :
I can't paste the files here...I don't know how to...Please download the files for me and provide me the solution!
Generally speaking, you have to use margin, padding or in case of absolute positionning, left, top etc...
In order to reduce the space between your logo and your main menu, you have to reduce (or delete) the padding-bottom in div#logo css property, located on common.css, as this :
div#logo {
padding: 15px 0 0 0;
text-align: center;
}
For your search bar, the css is contained inside the parent div, inline style. You'll have to override the top property in your css file, and giving it -50 as a value for instance.
Now you have the general idea, I think you can manage your other issues.
I strongly suggest you to use Firebug (extension for Firefox / Chrome) though.
Feel free to ask for precisions.
I seen your css. In that padding: 7px 10px 10px; making space between menu and logo, and also you were mention height also.
reduce the padding and also margin-top property.
better post your codes
make this change in common.css to remove bottom spacing of the logo -
div#logo {
padding: 15px 0 0 0;
text-align: center;
}
2, 3
I think
You can use margin-top or bottom property
or padding
In common.css, find this:
div#logo
{
/*width: 185px;
height: 75px;
float: left;*/
text-align: center;
padding:15px 0px;
}
When two values are supplied for the padding attribute, they specify the top/bottom and left/right values. Therefore at the moment there is 15px of padding being applied to both the top and bottom of the logo. (See http://www.w3schools.com/cssref/pr_padding.asp.)
Change the padding:15px 0px; line to padding: 15px 0px 0px 0px; - this will set all padding to 0 apart from the top, which stays at 15px.
You should be able to find a similar solution for your other queries: look for the container id in the HTML, then find the CSS for the id. For example, if the Featured Listing is in <div id="featured">, look in the CSS for div#featured, and edit the padding property there.
I am struggling with a CSS issue. I want to display a Google +1 button next to ShareThis buttons (I am using Drupal).
For some reason, Drupal adds a panel searator CSS class:
I tried to modify my CSS file as following:
.panel-separator { display: none; }
but it only produced this:
There is enough space to the right of the ShareThis buttons to display the Google +1 buttons. But, the buttons are stacked on top of each other.
How do I get the button to align horizontally? Thanks.
Update
I have set a lot of width and I also added float: left;:
.GYPO_social_buttons {
padding-top: 91px;
width: 200px;
float: left;
}
.GYPO_share_this {
width: 90px;
}
.GYPO_google_plus_one {
width: 40px;
}
Here is the enclosing div according to firebug (I am using Firefox):
Update II
Woops, my bad. I have now set the float: left; on the button themselves rather than the enclosing div and the issue is solved. Thanks !!!
.GYPO_share_this {
width: 90px;
float: left;
}
.GYPO_google_plus_one {
width: 40px;
float: left;
}
You need to give enough width to the container div, that is holding these icons. After that you can float these icons by giving float: left; . The reason why Google +1 is moving down is because the container div doesn't have enough width to accommodate this next to mail icon.
From the portion of html and css you are providing it is a little bit difficult to find out what would be the best way to do this. The question is what generates the break. It could be that the parent element is not wide enough to and the +1 needs to be below. In that case you can simply change the width. It could also be that there is css that generates a break (e.g. display: block and no float for on eof the elements) In that case you might try to change that to display: inline or a float: left for the buttons. There might be a clear somewhere in there which would cause the float to break (although it doesnt look like a clear on the image)
I suppose there are more possibilities than that...
I need to see more of your code. If you have tried to make your container larger to hold all of the icons and that didn't work, I would guess it was another element forcing the icon to the next line. Without more code, all I can do is make a guess...
I was in the same situation once. Here's what solved my problem:
You can also choose the "style" setting on the region and choose "No markup at all". This will remove the panel separator.
For more info: https://www.drupal.org/node/579020#comment-8163459