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.
Related
Using The Divi Video Slider Module to display a set of videos. We'd like to display the video title on hover for each video. Divi says they currently don't support this functionality, but said to check the development community for answers.
See the test page at https://work.gmmb.com/project/political. have tried to edit hover class, but hasn't worked.
There is a class at class="et_pb_video_overlay_hover" Not sure how we can use this to display the video's title from the WordPress Media Library.
Any good Divi coders who have tried this or might know a custom CSS or JS solution?
A really quick workaround would be to use an :after pseudo-element on class="et_pb_video_overlay_hover". You could put the title in content: like so:
.et_pb_video_slider_item_0 .et_pb_video_overlay_hover::after {
content: "Title";
// Title will be small, white and centered at the top of
// the video. Use other CSS properties to style your titles.
}
The first video is .et_pb_video_slider_item_0, the second video is .et_pb_video_slider_item_1 etc.
That is a quick solution you can implement right away.
Edit - I've just have a quick look at the Divi Video Slider module to see if it can be filtered. The code you need is located in these files:
/wp-content/themes/Divi/includes/builder/module/Slider.php
/wp-content/themes/Divi/includes/builder/module/SliderItem.php
I tried to use the Admin Label to set a title for each video, then print that to screen on the overlay, but it isn't accessible during render. I do see that content_unprocessed does contain the title:
["content_unprocessed":protected]=> string(339)
"[et_pb_video_slider_item admin_title="Video Title Goes Here" src="https://www.youtube.com/watch?v=FkQuawiGWUw" ... "][/et_pb_video_slider_item]"
but it is protected and not directly accessible from within the render function.
I'm afraid it's going to require some long and tedious coding to get that to work. The easier solutions are to use the CSS hack above, or simply embed the title on your overlay images.
The website is https://www.alisamesseroffphotography.com/ and the mobile site margins look awful. We use PhoPhoto in Wordpress, and cannot figure out how to add some margins.
Thanks so much!
What mobile site?
It's literally the same site.
You need to look at ditching or changing the theme.
As the other answer says, look at media queries : using a media query you can change how the page displays depending on the screen size it is viewed on. For instance, you could use this to add padding to the article-content class to force there to be white space around all the content on the page (but not the navigation or header image) which I think would solve your problem.
I think you should probably change the theme, something based on bootstrap would do a lot of the styling on a mobile device for you, and would make the navigation work better.
I am trying to create full width banner on a Joomla site which is sitting on Gantry5 framework. Tried to do some css work with no luck.
Here is the url http://tinyurl.com/ptponmd
I haven't worked with Joomla, but what am saying is generic to all CMS.
One solution, will be to add a custom region in your theme template and place slideshow there or print the slide directly in the template.
Here, all contents are wrapped with some 70% width using class"g-container"
If you inspect your site, you will see a section with id="g-navigation" and below that a div with class="g-container".
If you can create a new region and print you slide show inside the Section id="g-container" but above div class="g-container". You will get full 100% width.
Please refer the image, for better understanding http://prntscr.com/7qt0u9
Hope this helps!
For my website we use custom style sheets that are stored locally on our server and are injected into the webpages. However when i add them to CKEditor and then attempt to resize or move an image with the enhanced image plugin they cannot be resized or moved at all. Has anyone encountered this problem before? Is there anyway around it?
edit: So i add my css files using
config.contentsCss = ['http://fonts.googleapis.com/css?family=Droid+Sans',
'http://fonts.googleapis.com/css?family=Bree+Serif',
'http://fonts.googleapis.com/css?family=Droid+Sans+Mono',
'http://192.168.0.50/css/new/all.css?v=1" media="all',
'http://192.168.0.50/css/new/templates.css?v=1',
'http://192.168.0.50/css/pre_review/colors.css?v=1',
'http://192.168.0.50/css/pre_review/paged_test.css?v=2',
'http://192.168.0.50/css/pre_review/bootstrap.min.css?v=1',
'http://192.168.0.50/css/pre_review/main.css?v=1',
'text/css'];
I have also installed the Enhanced Image plugin to allow me to resize and move images around. however when i insert an image on to the page the source looks like
<p><img alt="" height="239" src="http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png" width="239" /></p>
when i originally set the image width and height in the popup panel i set the values to 2 and 2, these values do nothing to edit the actual size of the image. It still displays at the full size of 239x 239.
I know that it is my added styles that are causing this error as it works fine without them, However i do need them. is there anyway around this without having to remove the styles?
First of all, your contentsCss has some weird parts like the last item or this 'http://192.168.0.50/css/new/all.css?v=1" media="all'. Please verify that all this works. Incorrect rules may affect CKEditor.
Second, the issue may be very simple - your CSS most likely affect widgets styling. Disable loading your CSS files one by one and see which one breaks the Enhanced Image plugin. Then find the rule that breaks it and then improve the rule so it does not affect images.
I am using a wordpress version of Supersized. My issue is that I wish to have this nice resizable full-width image gallery but be able to place the content below. An example of how I wish it to perform here; http://www.pedinilondon.co.uk/ They are using the non-wordpress version so are easily able to break it out of the template.
Is it simply a case of CSS or div manipulation or am I running into a brick wall with this? Should I be using a different knd of slideshow to achieve what I want?
Thanks
What you want sounds like fluid images (responsive design), which there seems to be a plug-in for that. http://wordpress.org/extend/plugins/wp-fluid-images/faq/