Everytime I add a Gallery in a post, I need to modify the html from
[gallery type="rectangular" link="none" ids="1743,1742,1741"]
to
<div style="margin: 0 auto; width: 500px;">
[gallery type="rectangular" link="none" ids="1743,1742,1741"]
</div>
I want to modify the php file to have this extra html added. Is this possible to do? I have limited knowledge on php and am struggling to find where this gallery tag is generated.
The gallery gets generated in a <div> with class="gallery" and some variable classes, depending on the gallery settings. See wp-includes/media.php#L1046.
So, you can simply add the following style in your stylesheet (styles.css), or using a plugin like Simple Custom CSS.
.gallery {
margin: 0 auto;
width: 500px;
}
If your theme is responsive, I would suggest to also set the maximum width to 100% to make sure it fits smaller screens as well.
.gallery {
margin: 0 auto;
width: 500px;
max-width: 100%;
}
Do note that since you specifically add "rectangular" as type, you might want to use a different class than gallery to make sure the styles do not get applied to other galleries.
To verify which class can be used, you can inspect the gallery in your browser:
Hover over the gallery,
click on right mouse button and select 'inspect element'.
I hope that helps. GL!
Related
I'm developing a Wordpress-theme with a theme-options page. In these options, a max-width for the website can be set, but I'm having some difficulties with the content-area.
When the max-width is filled in, the header- and footer-area get the max-width and a margin: O auto;.
The content-pages will be created using the Gutenberg Builder and I want to be able to add background-attributes to the blocks I use and display them full-width, but the content to fall into the max-width which was defined before.
HTML:
<header class="site-header">
<div class="header-wrapper"></div>
</header>
<main class="site-content">
<article class="post-10">
<header></header>
<div></div>
<footer></footer
</article>
</main>
<footer class="site-footer">
<div class="header-wrapper"></div>
</footer
CSS:
.header-wrapper,
.footer-wrapper,
article {
max-width: 1366px;
margin: 0 auto;
}
I get this:
I want my background to be full-width, but my content to have the same with as the content of my header and footer.
Is there a possibility to set the same max-width for the header-, content- and footer-section of the page, and make sure the background in the content-area is still full-width?
You can activate "wide alignment" and "full alignment" by adding add_theme_support( 'align-wide' );
to your functions.php file. The user then has the option to align images across the whole viewport width.
See also https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#opt-in-features
But that's for images, not for backgrounds.
For background areas/images you could try to create regular blocks (100% of the content area) which have margin settings like margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); (same as in full-width Gutenberg blocks) and padding-left/padding-right calc(50vw - 50%);: That way the block would span the whole viewport width, but the content area would have the width of the content area (full width minus padding). You also would have to add the regular padding you want to use inside your content column to those values.
If I understand then your css should look like this:
.header-wrapper,
.footer-wrapper,
article header, article div, article footer {
max-width: 1366px;
margin: 0 auto;
}
article{
width: 100%;
background: blue;
}
but only if max-width is setted for those 3 divs inside article
Does content-block is represented by article ?
Update
I recreated codepen from https://css-tricks.com/full-width-containers-limited-width-parents/
https://codepen.io/anon/pen/eaJyqV
If this is possible you could put image with position: absolute and then put text with position: absolute on top of it but I guess your content-block doesnt work that way ;/
When using Chrome on PC and refreshing our page, sometimes the two paragraph text area where it says "Small Business Finance Team doesn’t stop advocating for its clients..." will ignore its parent div's 580px width rule and display behind the form on the right.
I'm not sure if this is because of the mobile responsive design or the div placement, but it's very strange due to Firebug displaying 580px whether the text is inside or outside the 580px width. The width value is never crossed out to indicate that the rule isn't being used.
Adding different !important rules, paddings, margins and commenting out the mobile area doesn't seem to fix the issue.
Website: http://smallbusinessfinanceteam.com/gold
Example image: http://i.imgur.com/VDNHmG5.png
Try removing the width: 580px property and just keeping the max-width: 580px property on the .left class.
.left {
max-width: 580px;
float: left;
padding-right: 30px;
overflow: auto;
}
I've been trying to figure this problem out, but no luck. There's probably a simple solution that I'm missing. I'm working on a Home Page template that has 4 featured products. The featured products end up showing diagonally and the images also overlap the title, price, and add to cart buttons. If anyone can help, that would be great!
Here's a link to the page that the template is on: http://playground.krisyoungboss.com/home/
(Going to change the front page displays later)
And also here is the shop page link if anyone needs to compare: http://playground.krisyoungboss.com/shop/
Thanks❤️
You've got a collection of things going on.
First, the reason the things are showing diagonal is because you have a <pre> element in your code. I suspect you may have copy-pasted a shortcode, and in doing so picked up the <pre> they had wrapped the shortcode with.
So, first things first, edit that page in the WP dashboard, and change to the text view (tab in the top-right corner of the editor area). Look for this:
<pre class="brush: php; gutter: false">
Find it, and remove it (don't forget to remove the closing </pre> tag also).
Then, the reason your images are covering up the content below is because of this declaration in your stylesheet (on line 228 of your stylesheet):
img.wp-post-image {
border: 5px solid #000000;
border-radius: 5px;
float: left;
height: 300px;
margin-bottom: 15px;
margin-right: 10px;
width: 300px;
}
The float:left is applying to the images in your featured section, which is causing the problem. Additionally, the height / width are not good (although they are being overridden by other styles).
Remove float:left, or else add a style like so (after the above styles in your stylesheet):
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
float: none;
}
Finally, your add-to-cart button is too wide. You need to address the styles for it, also - it's spilling out of the parent li elements.
I am working on a WordPress site and there is something that I just can't figure out no matter how hard I try. I want to have a grid similar to this (http://www.elegantthemes.com/gallery/origin/) but more like this: (http://themeforest.net/item/hercules-portfolio-business-wordpress-theme/full_screen_preview/5124743). You'll see that in the hercules theme the grid is only at the top of the page. I want to do something similar to that at the middle of the page. Unfortunately I cannot switch themes to get that one function. So I wanted to know how I would create my own version. Can someone point me in the right direction?
P.s. the grid does not need to have any fancy zoom animation and doesn't even have to be linkable. Just static pictures like that in a grid of 4x2. No spacing or padding or margins between the images. And I contacted the designer of that theme and he mentioned that it is not a plugin that does it. It's custom CSS3. He wasn't any more helpful then that though :/
I'd use an unordered list to contain the images, float the list items and apply a 25% width. The images then need a 100% width, and max-width 100% and height: auto a for responsive layout. The images you upload would need to have the same height dimension (or you could set a fixed height on the list items, but risk losing some image content).
ul#picture_grid {
list-style: none;
width: 100%;
overflow: hidden;
}
#picture_grid li {
float: left;
width: 25%;
}
#picture_grid img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
I am looking for a solution to deliver a "wallpaper" banner with the adserver "openx". A wallpaper consists of a leaderboard banner (728x90 px) and a vertical skyscraper. I cant find any option in OpenX itself, so I guess there must be some kind of dirty methods to get it done.
Anyone here having experiences with it? I'm thinking of delivering just an leaderboard banner and then attaching a html snipped to the banner - which contains the markup to my skyscraper-banner... :-/
greg0ire > You can see an example of a "wallpaper" banner on this site (you might experience an overlay banner before, make sure you disable ad blocking extensions): http://www.allocine.fr/ Some days it is in flash, other days it is just a background-image css property set on the body element. I'd like to achieve the second option.
Thanks!
I got wallpapers ads to work through openx using this method.
First I created a div below the content wrapper of my site (using wordpress, header.php file).
<div id="adbg" style=" margin: 0pt auto; height: 1000px; width: 100%; position: fixed; cursor:pointer; ">
Then I created a div block with the wallpaper image in the CSS and added it to OpenX as a TEXT BANNER
<div OnClick="location.href='#';" style="background: url('image.jpg') no-repeat scroll center top #026eb4; height: 100%; width: 100%; margin: 0pt auto; cursor:pointer; "></div>
Finally, I took the openx embed code and place it within the ADBG div I pasted above.
This technique worked well for me on all browsers.
You can of course take the CSS in the adbg div and store it in your CSS file.
For the moment, I ended up doing this, but I'd like to see better solutions:
<div class="openx_<?php echo $_block->getBlockParameter('css_class');?> openx_background hidden">
<?php echo str_replace('INSERT_RANDOM_NUMBER_HERE', rand(0, 9000), $_block->getBlockParameter('html', ESC_RAW));?>
<?php echo javascript_tag()?>
var checkImg = window.setInterval(function(){
if (jQuery('.openx_background img').length)
{
jQuery("body").css('background', 'url("' + jQuery('.openx_background img').attr('src') + '") no-repeat');
window.clearInterval(checkImg);
}
}, 1000);
//give up 3 s later
setTimeout(function(){
if (jQuery('.openx_background img').length == 0)
{
clearInterval(checkImg);
}
}, 3001);
<?php echo end_javascript_tag()?>
</div>
$_block->getBlockParameter('html', ESC_RAW) contains the openx javascript invocation code.
Not sure if this is still of interest, but there's a setting in openX for that called "Companion positioning". Have a look at the OpenX reference guide under point 4.6:
http://opensourceusers.com/sites/default/files/openx_reference_guide.pdf
It's a method to make sure that a skyscraper is delivered every time a certain leaderboard is delivered. You can then use the prepend/append functionality to color the background to turn this "hockey stick" into a full blown wallpaper.