TopNav - Slideshow - extra border

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
deeptikorwar
Sr. Propeller Head
Posts: 111
Joined: Tue Aug 20, 2013 11:38 pm

TopNav - Slideshow - extra border

Post by deeptikorwar »

Hi All,

I have modified my Top Nav Home page and stylesheet many times. I cannot figure why an additional border appears around my slideshow. Upon inspection, it seems to be coming from Topic.css. A piece of code is duplicated in Topic.css and the second set adds the border. How and where is this code generated? By the way, the Flare preview is perfect, the border is visible only after a build. This issues looks related to viewtopic.php?f=6&t=18484&p=111291&hili ... ss#p111291 but I am clueless :(
mc-wrapper4.png
You do not have the required permissions to view the files attached to this post.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: TopNav - Slideshow - extra border

Post by NorthEast »

Flare has quite a number of preset (default) styles that are added at build time.

To change this one, edit the MadCap|slideshow style in your stylesheet, and set the box-shadow property.

Note: If you edit the stylesheet in Advanced view, you can see these preset styles by selecting Show: Set properties - properties set in this or imported stylesheet.
deeptikorwar
Sr. Propeller Head
Posts: 111
Joined: Tue Aug 20, 2013 11:38 pm

Re: TopNav - Slideshow - extra border

Post by deeptikorwar »

Hi Dave,

I have checked my stylesheet for Home page. Here is the code.

Code: Select all

MadCap|slideshow
{
	border-style: none;
	box-shadow: none;
}
I am not sure why the code gets doubled up in Topic.css and why it overrides this piece of code in the stylesheet.

Thanks,
Deepti
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: TopNav - Slideshow - extra border

Post by NorthEast »

It works fine for me, if I set box-shadow: none

My guess is that you have more than one MadCap|slideshow definition in your source stylesheet(s); e.g. in a different medium.
Open your CSS file(s) in a text editor and search for 'slideshow' styles.
deeptikorwar
Sr. Propeller Head
Posts: 111
Joined: Tue Aug 20, 2013 11:38 pm

Re: TopNav - Slideshow - extra border

Post by deeptikorwar »

Phew... finally stumbled upon the culprit when I was trying to fix something else. There was no stylesheet linked to the OtherTopics masterpage. As soon as I linked the appropriate stylesheet, this issue got fixed :D

Thank you.
Scotty
Propeller Head
Posts: 98
Joined: Thu Feb 02, 2012 6:56 pm
Location: Europe

Re: TopNav - Slideshow - extra border

Post by Scotty »

deeptikorwar wrote:Phew... finally stumbled upon the culprit when I was trying to fix something else. There was no stylesheet linked to the OtherTopics masterpage. As soon as I linked the appropriate stylesheet, this issue got fixed :D

Thank you.
I'm having the same issue with the border shadow appearing in this Topic.css.

Can you clarify how you fixed this, please?
The newest noob in town.
dmiller
Jr. Propeller Head
Posts: 9
Joined: Mon Aug 06, 2018 11:00 am

Re: TopNav - Slideshow - extra border

Post by dmiller »

Hello,

I'm reviving this old thread as I've tried everything in it, read the threads linked in it, and am still am seeing a box shadow on my slideshow. So far my efforts have been:
  1. Setting every project stylesheet box-shadow attribute for slideshow and slide in every medium to none.
  2. Opening every project stylesheet, doing a find for box-shadow, slideshow, and slide, and finding no culprit.
  3. Unlinking stylesheets to all master pages, targets, the project, and the page in question. Closing the project and application. Reopening the everything, relinking the stylesheets, and rebuidling.
  4. Opening every output stylesheet, doing a find for box-shadow, slideshow, and slide, and finding no culprit. (Yes, indcluding the stylesheet specifically for slideshows, but all others as well).
  5. Checking the page source code. This is the only tiny little part of a clue I could find (see below).

Code: Select all

<div id="MCSlider1" class="MCSlider" data-mc-pause="10000" data-mc-speed="500" data-mc-mode="fade" data-mc-auto-delay="10" data-mc-auto-direction="next" data-mc-auto-controls="False" data-mc-auto-start="True" data-mc-auto-hover="True" data-mc-responsive="False" data-mc-adaptive-height="False" data-mc-slide-width="250px" data-mc-navigation="Bullets" data-mc-controls="False" data-mc-infinite-loop="True">
How can I figure out where <div id="MCSlider1" class="MCSlider"... is getting its styles? I'm able to find the string "MCSlider" it in the slideshow output stylesheet, but there is no box-shadow attribute set anywhere it occurrs. I can't find anything that matches it at all in the project stylesheets.

If anyone has any suggestions that I can even just try, I would be so grateful. I'm ready to throw my laptop out the window!
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: TopNav - Slideshow - extra border

Post by NorthEast »

dmiller wrote:How can I figure out where <div id="MCSlider1" class="MCSlider"... is getting its styles? I'm able to find the string "MCSlider" it in the slideshow output stylesheet, but there is no box-shadow attribute set anywhere it occurrs. I can't find anything that matches it at all in the project stylesheets.
For me, setting this in my source stylesheet (in Flare 2022) works fine:

Code: Select all

MadCap|slideshow
{
	box-shadow: none;
}
Check your output using the browser tools (press F12), and inspect the HTML/CSS of the output.
In my output, it is this element that would have the box shadow CSS - which is the parent element of the div you mentioned in (5):

Code: Select all

<div class="mc-viewport MCSlider "...>
But if I set the CSS for MadCap|slideshow in my source stylesheet as above, then I can see that change being set in the output's Topic.css file for .mc-viewport as such:

Code: Select all

.mc-wrapper .mc-viewport {
    box-shadow: none;
...
}

So using browser tools, you can check if the box-shadow: none; is being applied at all, or whether it's being applied and then overwritten by something else.
If it's not being applied at all, then check the topic in the source is actually using the correct stylesheet where you made the change.
dmiller
Jr. Propeller Head
Posts: 9
Joined: Mon Aug 06, 2018 11:00 am

Re: TopNav - Slideshow - extra border

Post by dmiller »

Hi Dave,

Thank you so much for your help with this. Like I said, ready to throw my laptop out the window. :) The TL;DR for below is basically that I can see what you're talking about in the browser, but can't trace it backwards from there to the output stylesheets and then to the project styles.
Dave Lee wrote: For me, setting this in my source stylesheet (in Flare 2022) works fine:

Code: Select all

MadCap|slideshow
{
	box-shadow: none;
}
Yes, I've checked and reset this many times.
Check your output using the browser tools (press F12), and inspect the HTML/CSS of the output.
In my output, it is this element that would have the box shadow CSS - which is the parent element of the div you mentioned in (5):

Code: Select all

<div class="mc-viewport MCSlider "...>
But if I set the CSS for MadCap|slideshow in my source stylesheet as above, then I can see that change being set in the output's Topic.css file for .mc-viewport as such:

Code: Select all

.mc-wrapper .mc-viewport {
    box-shadow: none;
...
}

So using browser tools, you can check if the box-shadow: none; is being applied at all, or whether it's being applied and then overwritten by something else.
If it's not being applied at all, then check the topic in the source is actually using the correct stylesheet where you made the change.
Apologies, I didn't make clear that in my #5 above, I was checking in the browser. That's where I found the MCSlider <div> and wondered where it was getting its styles. In rechecking the output source and stylsheets, in Topic.css I see no .mc-wrapper .mc-viewport that are for slideshows or slides, and actually no mention of slideshow elements at all. Slideshow.css does not contain the string box-shadow at all anywhere, and the snip you're referring to looks like this:

Code: Select all

.mc-wrapper .mc-viewport {
    box-sizing: content-box; 
    z-index: 0;
} 
Is there somewhere I can explicitly set the box-shadow to none for that? I'm not finding anywhere in my own flailing efforts. Should I add it somewhere in the source stylesheet? It's not clear to me where.

I wonder if it matters that the page in question is the homepage, and uses its own stylesheet (though every project stylesheet now has box-shadow=none). I mention it because in looking at the output stylesheets, I can connect them to their locations/purposes, but don't see anything that accounts for the homepage styles. Could that be a clue? The homepage stylesheet is linked to both the topic page and the master page for the homepage.

Thanks again for your response! I feel like this is getting somewhere!
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: TopNav - Slideshow - extra border

Post by NorthEast »

Not sure what to suggest, as it worked fine for me in an empty project, and that was the CSS it generated - this was for a HTML5 target using a side nav skin, built using Flare 2022.

Anyway, it looks like your CSS in the output is different to mine.
If you can't fix it in the source stylesheet, then just use the browser tools to inspect the output and find what element the box-shadow is being applied to.
In my output the box-shadow was being set on .mc-wrapper .mc-viewport {} , but you'll have to find where it is set in your output - maybe it's set on #MCSlider, .MCSlider, or something else.
Anyway, when you find that element, just copy the CSS for the selector and use that in your own stylesheet, but set it to box-shadow: none;

As the link to your own stylesheet is added to the output after Topic.css, it'll override the CSS in Topic.css.
dmiller
Jr. Propeller Head
Posts: 9
Joined: Mon Aug 06, 2018 11:00 am

Re: TopNav - Slideshow - extra border

Post by dmiller »

Dave Lee wrote:Not sure what to suggest, as it worked fine for me in an empty project, and that was the CSS it generated - this was for a HTML5 target using a side nav skin, built using Flare 2022.

Anyway, it looks like your CSS in the output is different to mine.
If you can't fix it in the source stylesheet, then just use the browser tools to inspect the output and find what element the box-shadow is being applied to.
In my output the box-shadow was being set on .mc-wrapper .mc-viewport {} , but you'll have to find where it is set in your output - maybe it's set on #MCSlider, .MCSlider, or something else.
Anyway, when you find that element, just copy the CSS for the selector and use that in your own stylesheet, but set it to box-shadow: none;

As the link to your own stylesheet is added to the output after Topic.css, it'll override the CSS in Topic.css.
Thanks for this, but I've already done all that. The problem is that there is NO box-shadow set in any output files for any elements, so it must be coming from somewhere else, and where that is, I do not know.

NB: I've had this issue with every single output I've built in Flare, so I was hoping someone else might have, too, and know where this is coming from. With the last two outputs, I lived with the box shadow for years, then one day just reset it again in the the stylesheet and it fixed it, but I don't know why it worked that time as opposed to all the other times I tried. I'm guessing it's because I changed something else somewhere else in the interveing years, but don't know what that was. I'll keep poking around and post a solution here if I find one. It's all quite a mystery.
Post Reply