Docs

[bletek]

What is the best way to use 4 graphics like calligraphic borders around a slider. Is this possible? This would be a decorative border.

Thanks.

[Rahul]

Hey There,

Thanks for writing in!

Regretfully, at this time I am not entirely certain what it is you’re trying to do.
If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do. We’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks for understanding!

[bletek]

Okay. Two things. I have attached an image showing what I am trying to accomplish:

1. In the image at the top left and right are two arrows pointing to the decorative border surronding a slide. That is what I am looking to do. I was placing the borders for all sides in the global layer of the rev slider so that it would cover all sliders. The problem is the scaling, etc. It should be slide based, but they get all over the place with this method. No way to lock the borders to the edges. It just occurred to me that the best way may be to apply them to all of the background images of each slide, but they will disappear with each transition between slides. Is there a way to do this in X Theme?

2. In the image the bottom left and right lighting symbol shows two graphic headers for the two columns. How can this be accomplished in Cornerstone. The issue to me is making sure that the height stays the same but the image stretches to the width of the column. How can I add graphical headers to x theme columns.

Thanks for all you guys do.

R

[Joao]

Hi There,

1- We could try to place a background image on the section where your slider will be placed and have some margin around the slider so the edges of that image can be visible.

2- I guess background image would be the answer as well.

I am still confused about your goals, so please provide your URL and try to implement as reccomended so we can give you further advice.

Thanks

Joao

[bletek]

Thanks for the response. Here is a link to the page where I tried to place a background image and adjust to fit. One of the problems is that the borders are not perfectly straight to give a good effect of a handrawn border so my background would need to be transparent and on top of the slider in the container otherwise you need a perfectly rectangular background border graphic. See this page and go below the slider above masthead.

http://musicbymikeallen.com/2-new-home-page/

Thanks

[Friech]

Hi There,

Please apply the image as a border-image (https://css-tricks.com/almanac/properties/b/border-image/) and not as a background. Obviously you need to use an image that is suitable as a border.

Thanks.

[bletek]

How would I do that on an element inside of Cornerstone? Through the css module under cornerstone for that page and element?

Example?

[Paul R]

Hi,

You can add a unique class to your cornerstone element and target it in your css code.

For example you added my-custom-border in the class field.

You can then add this in Custom > Edit Global CSS in the customizer.

.my-custom-border {
  border-image-source: url(border.png);
  border-image-slice: 20;
}

Hope that helps.

[bletek]

Thanks for the help and I did just as you said, however, nothing shows up. I just replaced border.png with the url to a jpg in my media library, placed the above code in my customizer and used my-custom-border on the column class. Nothing shows around the slider. Should I target the section or column?

[Paul R]

Hi,

I can’t see the css code getting added in your site.

Can you provide us your wordpress admin login in private reply.

Thanks

[bletek]

This reply has been marked as private.

[bletek]

I broke out the css for the specific border image I want to use and added it to customizer and referenced the class on the element. Still no change.

[bletek]

Any luck?

[Nabeel A]

Hi again,

Please replace the previous code with this one:

.my-custom-border {
    background: url(http://musicbymikeallen.com/wp-content/uploads/2016/11/parchmentbackground16x9-1.jpg) !important;
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[Nabeel A]

Additionally I’m seeing header jumps on your site, to fix this just add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

function stop_jumps() {
	jQuery('header.masthead.masthead-inline').css('height', jQuery('.x-topbar').height() + jQuery('.x-navbar').height());
}
jQuery(document).ready(function(){
	stop_jumps();
});
jQuery(window).resize(function(){
	stop_jumps();
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[Author]

Posts