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?
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?
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?
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.
1 Like
“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?
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.
1 Like
So components are really only valuable within projects; otherwise use over snippets?
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.
1 Like
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
1 Like
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?
<br data-pgc-define="simple.slideshow" data-pgc-define-name="Simple slideshow" data-pgc-define-auto-update="false" data-pgc-edit="null[img]" data-pgc-edit-classes="caption" data-pgc-section="Slide show" data-pgc-define-photo-preview-only>
Q2. Why didn’t component show in 2 call out cards, only 1 shows.
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?
1 Like
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.
Q2. What is a null in the editable section for dot dot dot. (I haven’t put the slideshow up, so no library link)
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?
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.
1 Like
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
<link href="new.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="Simpleslideshow.css">
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