I am setting up a blog with a new flat theme. I haven't used these before so please excuse me if I don't explain myself well.
This theme, Cordillera, comes with a full screen banner which has text layered over it. The look is great but I'd really like to be able to either a) be able to set the banner size myself or b) have it automatically adjust the container height to the image uploaded. Both being smaller than full screen, which would pull up the content below it.
Not having used this type of theme before I'm not sure what to look at to adjust this. You can check out the demo linked above or on my blog. I'm not even sure what portion of code to pull out to have you start with. If you go to my blog, the section in question is the one with the angel art.
Thanks so much for looking! I appreciate any and all help!
try to add this CSS into your site :
.top-banner {
width: 100%!important;
height: 300px!important;
background-size: contain!important;
}
go to "Appearance > Customize > additionnal CSS"
Related
I'm working on: https://holisticharmonyinhc.com/ via Wordpress
The homepage is currently set to display the Archives, and if you notice, the main section (not the sidebar) is being partially cut off on the right. The Single Post display do not seem to have this issue, only the Archives display. Wondering how this can be corrected.
Also wondering if it's possible / how to adjust the columns of the Archive display where the feature image is set to a 2:3 ratio (width:height) and the info of the post is centered vertically.
I'm not positive what coding is needed for me to provide, but happy to provide anything requested. Thanks in advance!
Add this CSS in your active theme style.css file
.ruby-section .ruby-content-wrap {
overflow: inherit;
}
I hope you guys can give me a hand on this one because I’m at my rope’s end with this piece of inline CSS nightmare. So. I want to have two columns of product categories, changing the size of the actual columns wasn’t hard but I have the problem with the blurry images. They are way bigger than the div but they still look blurry.
Inspecting the .prod-img-wrap div reveals it contains a tag with no class or ID that has some in-line CSS that I assume it’s probably generated elsewhere.
All the sollutions online show a older version of WooCommerce that still had actual inputs for the image sizes separately, now in the Customize > Woocommerce > Product images panel there’s only the crop options available. If I change the hard coded values in the inspector, the image loads fine, so I know it’s uploaded correctly.
I don’t even know what else to try at this point, I’ve been going at it for too long and it’s literally one of the last few details that I need to get sorted to deliver this website soon. I’m also quite unexperienced in WordPress so this might be a easy or obvious one for the more seasoned coders amongst you. Any help would be greatly appreciated, thank you so much for your time.
The page I need help with: http://sellgoldnow.co.uk/
EDIT:
I am trying to override with css the inline style generated here:
<div class="prod-img-wrap"><img src="http://sellgoldnow.co.uk/wp-content /uploads/2018/09/gold-bracelets1-262x108.jpg" alt="Bracelets" sizes="(max-width: 262px) 100vw, 262px" width="262" height=""></div>
With the following css:
.prod-img-wrap img[style]{
max-width: 705px !important;
width: 705px !important;
height: auto !important;
}
This is the part that I don't know how to "target" as I'm unfamiliar with the formulation, it's the first time i've seen it.
sizes="(max-width: 262px) 100vw, 262px" width="262" height=""
firstly, the images are blurry because their actual size is much much smaller than the area they are being made to fill. [they are only 262px x 108px and they are being stretched to 703 x 277px] So i would say you need to be adding larger images.
Secondly, if you are adding much larger images and the woocommerce is cropping it, try the plugin "Regenerate Thumbnails" [has million+ downloads]and go through those steps.
Lastly once you have added larger images and its still not working correct, try changing the thumbnail cropping settings in customiser. I would suggest 1-1 or uncropped.
Let me know if this helps!
EDIT:
to target those images you can use this class + code to override it:
ul.products li.product.product-category img,
ul.products li.product img {
max-width: none!important;
width: auto!important;
}
this will ensure those images display at their actual size.
I have a pretty basic question, and couldn't seem to find anyone else with this issue. I want to reduce the height of the default Marketing Banner (BigCommerce). What code should I enter, and where? When I go to the Theme Editor (Chelsea Warm theme, Stencil/json), I can't find anything on the built-in BigCommerce banner. Looking forward to the advice, and I apologize if it's vague - I'm mainly a marketing/graphics person, just occasionally forced to work with code.
Best,
YT
The default banner size should conform to the size of your banner content, but it looks like the Chelsea theme has some additional padding on the banner that's making it taller. You could enter this CSS into your footer scripts box (under Storefront>Footer Scripts in the control panel) to get rid of the padding:
<style>
.banner.rte {
padding: 0px;
}
</style>
I am a photographer and currently attempting to upgrade my site from a Portfolio of my images to a fully functional E-Commerce site.
I have gotten my head around most of the WooCommerce type things I need to do, and I have an idea of what I want. I feel like I can achieve pretty much what I want.
The big problem I'm having is dynamically picture framing my images for sale.
Some examples of what I want:
https://mattlauder.com.au/main-photo-gallery/landscape-gallery/lavender-bay-black-white/#prettyPhoto
https://kenduncan.com/product/docklands-melbourne-vic-vx2101/
Just the ability for me to make a .PNG frame, and have it dynamically added to the background of my images as the variations are selected.
I'm reasonably sure it's a simple coding thing, but I have 0 experience coding.
Any help would be awesome! I couldn't see a simple plugin to do what I want, and I couldn't really see any existing plugin or theme that would add this functionality.
Dan
You don't need to edit the images directly, and I don't recommend it because it requires a lot more work. CSS does the trick!
Since you said you are using woocommerce, I have targeted below the default woocommerce image in the gallery on the single product page.
This is a very basic picture frame - and you can make it a lot cooler if you want it to be (such as a matte)!
.woocommerce-product-gallery__image img {
border: 15px solid #666;
padding: 10px;
}
Add this code to your theme's custom CSS field.
For something like this https://mattlauder.com.au/main-photo-gallery/landscape-gallery/lavender-bay-black-white/#prettyPhoto
You will need some javascript.
Upload the frame png and all frame variations to your WordPress site.
Give your image class padding of variable size.
In the JavaScript code, replace the background image of your image element. Make sure your background is set to no-repeat.
Some CSS tweaking might be needed to get it to look exactly how you want.
I have a question about Custom CSS or using a coding block when uploading an image to a page as a logo. I am using squarespace for my website and I need help coding my logo so that it fits on every page. An option is to use Custom CSS or a coding block. I am using the Rally template for Squarespace and my logo has a max capacity unfortunately. What coding do I use to have my logo on each page? My site is www.goodemoments.com. Please help, I would like to officially launch my blog very soon!!
Typically, in Squarespace, the way to put your logo on every page is to use it in the header. That is true for the Rally template as well.
To do this:
Add your logo via edit mode by going to Design > Logo & Title >
Logo Image
Save
The logo will now be used in place of your title ("Goode Moments
| Lifestyle Blog")
Go to the Style Editor: Design > Style Editor
Under "HEADER: BRANDING", adjust the "Logo Width" parameter to
your liking.
Once you've done this, it may then make sense to add some custom CSS via the CSS Editor if some additional minor tweaking is needed.
Yes, so I would like to use Custom CSS, because my logo that I will be using is to small. The width only goes to a certain size and I want it to be larger.