Full width banner in Gantry5 joomla framework - css

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!

Related

How to edit html in WpBakery(Visual Composer) page

firstly I'm sorry for my english level.
There is a wordpress page that created with Visual Composer extension. Images in this page is not contain width height value. I want to add width height values to images in the page using html but I can't find html codes in page created with visual composer.
Please help me Why do I add to width and height values to this page.
Looks like there has an Image size input where you can specify width and height of image.
There a example from WP Bakery Docs video:

fitvids is adding padding-top to youtube video as inline important

I'm using a youtube embed plugin via wordpress to insert youtube videos. They work fine on some pages, but in of my widget areas the plugin adds an inline element of padding-top: 50% to the div with a class of 'fluid-width-video-wrapper', which shifts my video down 50% of the way, leaving a large gap. The div doesn't exist though when I use it on other areas of my site.
The div structure goes: epyt-gallery > widescreen flex-video when there is no issue, but on my widget area it goes:
epyt-gallery > fluid-width-video-wrapper > widescreen flex-video.
Is there something I did wrong with this area? Is there a way to remove the inline style or div from the widget area? I'm not sure how to go about it since the plugin seems to be adding it.
The widget area is currently using a shortcode inside of a 'text' widget.
The plugin is called YouTube by EmbedPlus Team.

Custom CSS Coding/Coding Block for a Website

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.

Full Width Slideshow Above Content

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/

Shadowbox skinning & sizing

How do I skin shadowbox and make sure popup size is fixed size?
The css part is ok since it's just overriding ids and classes.
However, I'm not sure what the markup.js is supposed to look.
So here are my questions:
I created shadowbox-custom-skin/markup.js and added the hook like:
add_filter('shadowbox-markup', 'shadowbox_custom_markup');
Now I can't find an example of how the markup.js is supposed to look.
(I'm trying to put the sb-nav div before the content and the sb-title div below the content and also add some new parameters).
I fixed the size of the popup using this method:
rel="shadowbox;width=480px;height=240px"
handleOversize resize no longer works. Meaning, it will resize content, but it's squeezed.
How do I make sure the popup is the same size, but oversized content isn't squeezed and small content is just centered?
You don't really need to tweak javascript to do this. Using the property inspector on your browser or the Firebug plugin, right click on the Shadowbox and see what css classes/ids are being used. Put those css classes/ids in your own stylesheet apply the styles you want. Then upload the file to your server.

Resources