...running wordpress Version 5.9.2 : i was wondering if there’s an easy way to customize the CSS for the featured image to appear with full width. At the moment the image has a huge margin - and is not full width as it appears on the page (see below) - https://www.job-starter.com/
i tried to get this to work with this WordPress theme by including some code into the custom CSS option - see below;
what is aimed: How can I set the featured images to a full width:
i tried the following code snippets in the option additional CSS:
FIGURE.block-image IMG {
max-width: 320px;
height: auto;
}
#2
FIGURE.block-image IMG {
max-width: 320px;
height: auto;
}
or
.block-image IMG {
width: 600px;
height: auto;
}
see the examination of the page:
Update: Hello dear #Howard E many thanks for the quick reply. Great to hear from you. I am so glad that you hepled me. Its awesome: i am running the theme called jobify: see the demo page: - Here is the live site - with the demo of this theme:
https://2709.getwpt.tech/ and besides here:
https://jobify-demos.astoundify.com/extended/
Question: Can we get the look and feel of the theme like it is shown on the demo-pages? That would be great. Many thanks in advance. - You saved my day.
Your question is a little vague. If you want to make the first wp-block-image on every page 100% width, you can do this. But it will work on every page.
You need to understand better how to scope your css.
But this should work.
article .wp-block-image:first-of-type img {
width: 100%;
}
Related
I work for 2 sister companies and we have copied the template of one website to another for most of the functionality.
For some reason, I cannot get the pagination to work as it does on the one website. We are using a custom theme so I can't seem to get any plugins to work.
The pagination works well here: https://clcanursing.co.uk/news/ and I want to be able to replicate how it looks and how it reacts to tablet and mobile devices. I am trying to copy it onto this page: http://clcacalldirect.com/blog/ but it fails here.
Any help would be appreciated!!
Thanks,
Andy
It seems like your issue is CSS related. You're missing some styles (like the one below). Make sure you're copying over all styles.
Use dev tools to see the differences between the two slices of code.
EDIT:
The below code gives you the exact style and functionality on tablet/mobile
#media (max-width: 1200px) {
.pagination .default--button {
border-radius: 0;
width: 49% !important;
text-align: center;
margin-top: 70px;
}
}
I'm trying to make this product page and have the items all in there but the problem is the pictures for each item are different size. I tried using Hard Crop but it didn't work.
I want the best solution for this that takes up the least amount of time and is the easiest.
http://burnabycitycomputers.com/shop
Change the style to the woocommerce.css file in line no.48
.woocommerce .page-wrapper img {
height: 150px;
width: 100%;
}
Add this style to your style.css file
.woocommerce .t-entry-visual {
height: 150px;
width: 100%;
}
If no tricks worked out put an !important over to your css and this should make a trick for you. I have not used important if needed you pursue that.
I'm trying to add an arrow to the left hand side of my active link in my categories sidebar for my wordpress site I'm building.
I've already put in the css for it to behave the way I'd like it, I've added a small change in colour just so I know it's working well.
I've attempted to add a background image with a small .png file and tried various CSS styling to get it how I want it but I've had no luck even showing the image.
I'm open to using the character such as "➤" or the like if I cannot use a background image, maybe I might be missing something.
http://94.23.211.70/~cewp/product-category/cushions/
The above my my URL that will go directly to the page you're wanting to see along with a link already highlighted on the sidebar.
Here is the css that is making this active:
.product-categories .current-cat a {
color: #000033;
background-image: url("images/ICONNAMEHERE.png");
}
Hopefully this is enough information to provide, anymore then just ask me.
Regards
You can achieve this by css and font awesome. First add font awesome to your project. You can also use unicode charecters instead.
.widget_product_categories li { margin-left: 2.5em; }
.widget_product_categories li:before {
display: block;
float: left;
margin-left: -2.5em;
font-family: 'fontawesome';
font-size: 14px;
content: "\f054";
}
if not interested in adding font awesome content:url("images/ICONNAMEHERE.png");
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!
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.