# Component styles didn't come thru **URL:** \ **Category:** Beginners\ **Created:** [September 2, 2020, 4:53pm UTC](https://forum.pinegrow.com/t/component-styles-didnt-come-thru/4495 "2020-09-02T16:53:52Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\ **Post date:** [September 2, 2020, 4:53pm UTC](https://forum.pinegrow.com/t/component-styles-didnt-come-thru/4495/1 "2020-09-02T16:53:52Z")
None of my styles came thru in my navbar component (background color grey) in mcgraphics/history/index.html Component is in top level mcgraphics What do I need to do? ![Screen Shot 2020-09-02 at 9.35.56 AM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/b/b473bf6b14d0f5587636fe096903588394341ab3.png) ![Screen Shot 2020-09-02 at 9.46.21 AM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/3/3ece2d77331195e0c895a59d2d6a2634e2acd9ff.png) ![Screen Shot 2020-09-02 at 9.46.53 AM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/2/2b928d412ae4596a98206c6b118451017b3a0996.png) ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [September 2, 2020, 6:04pm UTC](https://forum.pinegrow.com/t/component-styles-didnt-come-thru/4495/2 "2020-09-02T18:04:51Z")
What order are you loading your style sheets? Here, it looks like you are defining, rather than using a component. Does this element have all the right classes? Things like this are really tough to troubleshoot. What does the active rules section look like in your Style panel (the top most part of the Style panel) with the navbar selected in the tree? ---
**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\ **Post date:** [September 2, 2020, 11:12pm UTC](https://forum.pinegrow.com/t/component-styles-didnt-come-thru/4495/3 "2020-09-02T23:12:14Z")
Component works when I use it in the same top directory mcgraphics project. When I use it in the mcgraphics/history project the component has no styling. Do I have to add new.css from mcgraphics to to history project? If so correct that css only rides with the component in the same project? ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [September 3, 2020, 9:25am UTC](https://forum.pinegrow.com/t/component-styles-didnt-come-thru/4495/4 "2020-09-03T09:25:00Z")
The component doesn’t bring its own stylesheet. If it get styled by “new.css” then that stylesheet needs to be attached to every page that uses your component. ---
**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\ **Post date:** [September 3, 2020, 4:37pm UTC](https://forum.pinegrow.com/t/component-styles-didnt-come-thru/4495/5 "2020-09-03T16:37:04Z")
“The component doesn’t bring its own stylesheet. If it get styled by “new.css” then that stylesheet needs to be attached to every page that uses your component.” Same for javascript? ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [September 3, 2020, 5:12pm UTC](https://forum.pinegrow.com/t/component-styles-didnt-come-thru/4495/6 "2020-09-03T17:12:50Z")
Yup, once your project is posted on your host, none of the pages will “share” anything. Each will stand on its own, so any resources need to be loaded by each page. ---
**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\ **Post date:** [September 6, 2020, 9:32pm UTC](https://forum.pinegrow.com/t/component-styles-didnt-come-thru/4495/7 "2020-09-06T21:32:30Z")
So components are really only valuable within projects; otherwise use over snippets? ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [September 7, 2020, 9:30am UTC](https://forum.pinegrow.com/t/component-styles-didnt-come-thru/4495/8 "2020-09-07T09:30:56Z")
So, you can actually add resources to components. From the Project panel (the folder icon) you can right-click on a CSS file or JS file or even a folder and then select “Add to resources”. Then when you start a new project and load in the components, any resources will also be brought into the project. I’m almost finished with new Components documentation, but you can look at the old for now. > **[Components - Pinegrow Web Editor - Documentation and Tutorials](http://docsbeta.pinegrow.com/components/)** > > Smart components are reusable website elements that can have editable areas. Go through this article to learn about everything you can do with them. ---
**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\ **Post date:** [September 8, 2020, 4:30pm UTC](https://forum.pinegrow.com/t/component-styles-didnt-come-thru/4495/9 "2020-09-08T16:30:21Z")
in html where are Actions to take photo? ![Screen Shot 2020-09-08 at 9.01.06 AM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/6/6c5b0adea82cb85e9d4e4e5e8bd92c60320d7f2b.png) ![Screen Shot 2020-09-08 at 9.05.11 AM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/0/0d39085a11b40cf9f2ae29f01dfe8647fae91a69.png) ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [September 8, 2020, 6:50pm UTC](https://forum.pinegrow.com/t/component-styles-didnt-come-thru/4495/10 "2020-09-08T18:50:56Z")
On the right side of the Selected Element Menu (the blue menu that has the icons at the bottom of your screen shot) there is a down caret. Clicking that will open a menu that has the Take photo action. Bob ---
**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\ **Post date:** [September 8, 2020, 9:10pm UTC](https://forum.pinegrow.com/t/component-styles-didnt-come-thru/4495/11 "2020-09-08T21:10:16Z")
Note: I dragged my css and js to top level directory where index.html is Q1. Why didn’t dot dot dot areas come thru with my component? `
` ![Screen Shot 2020-09-08 at 1.15.35 PM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/9/9dadffdce93f6eddf293bf5e2214bac86fef5c9f.png) Q2. Why didn’t component show in 2 call out cards, only 1 shows. ![No Show](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/d/d3d5c4d8e88f1b42bca12347938dc5097427ad89.png) ![Shows](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/4/490c276d24ea8f58359cc55f7b783a81fb8f6ab6.png) ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [September 9, 2020, 9:57am UTC](https://forum.pinegrow.com/t/component-styles-didnt-come-thru/4495/12 "2020-09-09T09:57:16Z")
Q1: I don’t know the “Simple Slideshow” library that you are using. Can you provide a link? My best guess is that the dot navigation wasn’t selected when you defined the component. The code you posted gives me some info about the component options, but not the actual component code. Q2: Not sure at all why only selected sections show. I would have to look at how the slider works. Is there a JavaScript component that needs to target your slideshow-container? ---
**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\ **Post date:** [September 9, 2020, 3:45pm UTC](https://forum.pinegrow.com/t/component-styles-didnt-come-thru/4495/13 "2020-09-09T15:45:14Z")
`https://mcgraphics.us/indexSlider.html` is where I duplicated component. 2nd component area doesn’t show. `https://mcgraphics.us/SimpleSlideShow/` is the component. Q1. Do I need to add a container to hold the “entire” component including the dot dot dot. ![ComponentWorks](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/6/61d0da2d43293c450d28dfb929489f84bd53bddf.jpeg) Q2. What is a null in the editable section for dot dot dot. (I haven’t put the slideshow up, so no library link) ![NoDotDotDot](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/7/7482b98e5931316a457205087ade8ca899096c52.jpeg) Q3. Should I stop posting to beginner forum? I saw a brief link I only had 2 more, but couldn’t find more forum info on that? ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [September 9, 2020, 6:47pm UTC](https://forum.pinegrow.com/t/component-styles-didnt-come-thru/4495/14 "2020-09-09T18:47:59Z")
Q1: Yeah, I actually didn’t realize it, but you do need to have an outer container. That may solve your dot problem. Q2: When you make something editable, it needs a field id - if you don’t add one it gets set to null. Q3: Not sure about the limits on the beginner forum. It could be that discord sets a limit. You can post in General, Editing, or Styling - whichever seems appropriate to your question. PS: I’m not sure your JavaScript will work as expected when you have multiple slideshows on the page. It doesn’t seem like it was written to target specific sets of slides, so all will be changed with the same controls. ---
**Author:** ![Thomas](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/thomas/32/61_2.png) [@Thomas](https://forum.pinegrow.com/u/Thomas)\ **Post date:** [September 10, 2020, 9:46am UTC](https://forum.pinegrow.com/t/component-styles-didnt-come-thru/4495/15 "2020-09-10T09:46:08Z")
I haven’t walked through the entire thread (too stressful to be honest). This detail might not having to do with the above mentioned problem, but ``` ``` This will mean: None of your altered slideshow-styles (that you add to new.css) will ever come through, cause they’re always overwritten by the following default css. This is fundamental knowledge - which must be expected for a PG-user. And this is the reason for most “doesn’t come thru” problems. Sorting them the other way round means: The basic underlying styles come first and will be cascaded by “my own brew - however the style-sheet is called”. So rule of thumb: My own styles should always come last - after all the default stuff. Another reason why I’m writing this is, that I got the feeling, that you’re not well organised. Lot’s of things are kinda shots in the dark. Although this is the “beginner” list, I’m not sure that it is meant being a teaching class. Apologise for this - but I’m stalking it way too long (and couldn’t persist) Cheers Thomas