How to apply same styling to cloned view

16 posts / 0 new
Last post
vbeakovich
vbeakovich's picture
How to apply same styling to cloned view

I have cloned the Slash - Latest News Home changed the view title and block name. Everything works fine exepct for the styling. Images are without border and the content is below the image and not on the right side as when displaying the original view. I have placed both views in the same region and displaying only one depending on the selected language. I suppose i have to modify some css or tpl file(s) but not sure which one?

support
support's picture
Hi Vbeakpvich:

Hi Vbeakpvich:

Instead of cloning views, just duplicate the Displays inside the same View. It will reuse all fields and styles. Then you can just overwrite the filters or even fields.

Take a look at this video, is a good guide: https://www.youtube.com/watch?v=-0Y0-Bs17LA

Best!

vbeakovich
vbeakovich's picture
Great, thanks for the help!

Great, thanks for the help! Is there a way to apply same styling to a content type copied from Article content type with Bundle copy module?

mate
mate's picture
Cloning display inside a view

I tried to do the same. But when I clone a display let say 3 columns page in slash portfolio view the cloned display contains a right sidebar (with services and client blocks). I tried to adjust the visibility of this blocks not show on this new display. They disappear but the right side bar stays their without any content. How can a remove this empty area from this cloned display?

support
support's picture
Hi there Mate:

Hi there Mate:

You will need to clone the file sites/all/themes/slash/templates/page--node.tpl.php and name it as it would with your new content type. For this you will need the Devel module as it will suggest you which name use for it.

Once there, search for the string "span9" and replace it with "span12" so you can have the full width layout for that specific content type.

Best!!

mate
mate's picture
Cloning display inside a view

Thanks! The right sidebar disappeared. But the border of the pictures are not same as in the sample content and the titles of the portfolio items are on the bottom part of the pictures not under the pictures. How can I make them to look like as the sample content? With the small pictures, with black translucent backround?

support
support's picture
Hi there Mate:

Hi there Mate:

You will need to copy the footer images style.

Search for the file sites/all/themes/slash/less/style.less line 1661 and copy all the images styles.

Then add into the file css/style.css of the same folder (the one we will never touch), the same styles preceded by ".view-slash-latest-news ".

It has to be like:

".view-slash-latest-news img{"
"(...)"
"}"

Best!!!!

mate
mate's picture
How to apply same styling to cloned view

Hi there!

It is not working. I have copied from line 1661 the img part to style.css. Should I write view-slash-"name of the cloned view"?
I have tried that also but no change.

support
support's picture
Hi there Mate:

Hi there Mate:

If you finally cloned the view, then change the View ID in the CSS to your new one. This may be a little tricky, so ensure it is exactly the same by instepcting the View HTML conde with Firebug or something.

That is why I mentioned you to Clone THE BLOCK instead of cloning THE VIEW. Anyway, if you have it like that, give it a try.

Best!!!

mate
mate's picture
How to apply same styling to cloned view

Hi there:

Now I see the confusion. As I stated in my reply #4 I have duplicated a display in the Slash Portfolio view. But as you stated in your #2 reply the styling is not the same. Why is it not same when you say it is the simplest solution? In your last reply you say clone The Block. What block? We were speaking about displays in a view. I need to have multiple portfolio pages with different products with the original styling. Thanks for helping.

support
support's picture
Hi there Mate:

Hi there Mate:

When you are editing a View, in the top part of the panel you will find a set of displays for that same View. There is where you need to clone the block. You will find a button in the right part of the View options that says "Clone Block". That is the one you need to use in order to reuse all CSS styles associated to the View.

I may be confused, but I initially understand you wanted to clone the block from the footer, but now I understand that may be the one in the After Content Region of the Home.

Could you please clarify this to me??

Best!!

mate
mate's picture
How to apply same styling to cloned view

Hi there:

No. I wanted to clone inside this view for example the "3 Columns Page" display. I clone it and it has not the same styling etc..
I only want to have 5-10 "3 Columns page" with different content. I thought it will be much easier with the sample content included but clearly it is not enough only the clone the "3 Columns page" display. It would be a great help when you would write the steps needed to do to have the same style for a cloned "3 Columns display". The duplication for the "page--node.php template" i have done the secondary bar disappeared. But the items and their titles look still bad.

support
support's picture
Hi there Mate:

Hi there Mate:

Could you please share the URL with us??? I think it will save a lot of time.

Best!!

mate
mate's picture
How to apply same styling to cloned view

Hi there:

Please see the differences between these pages:
http://pro-klinimed.hu/portfolio-3-columns (good)
http://pro-klinimed.hu/legparnas-matracok (not ok)

Thanks!

support
support's picture
Hi there Mate:

Hi there Mate:

FOUND THE ISSUE!!!!!

I was wrong about some specific things. The main layout of the view is generic, but there are some specific fixes, deppending on the SPECIFIC DISPLAY of the View. So, resuming, you need to do this:

/*RIGHT WHERE IT SAYS*/
.view-display-id-page_1.view-slash-portfolio-4-columns, .view-display-id-block_2.view-slash-portfolio-4-columns{

/*ADD THIS AT THE END AND BEFORE THE {*/
, ..view-display-id-page_4.view-slash-portfolio-4-columns

Add it on the Lines: 612, 650 & 692

Let me know.

Best!!!!

mate
mate's picture
How to apply same styling to cloned view

Hi there:

Now the original sample 3 column portfolio is just as bad as the new display.
Please advise.

Log in to post comments