Two Part Element Question

[tmlogo]

Right now I am using the Top, Left, and Bottom navigation links. The output is making the left links (with the search box above them) too wide on larger screens. Where can I adjust the percentage of the left links in relation to the main content to the right?

In addition, is there a way to make the images for a carousel smaller. They come out huge on a larger monitor.

One last thing, how can I change the color of the links in the navigation area.. i.e. teal for the left, white for the bottom, etc. I was able to change the top ones directly through the backend.

Thanks, hopefully these are the last of my questions.

[ShopSite Lauren]

It depends on what template/theme you are using.

Left Links - in most themes the left area is percentage based. In order to change this percentage you would need to adjust the template itself.

Smaller Carousel - some themes (such as themes using the BB templates) have an alternate page template called something along the links of "-.sst". If you are using one of these themes, you can go to Page > Edit Page Layout, and change the template. If you are not using one of these themes, you would want to make a copy of the template you are using (Merchandising > Custom Templates > Copy ShopSite Template). Name it whatever you want. Then, edit that template...find something along the lines of [-- INCLUDE -.sst PROCESS --] or [-- INCLUDE -.sst PROCESS --] (the - is the name of the template set), and move that tag inside the main content area (probably just above the <h1>[-- PAGE.Name --]</h1> tag area). Then select your new template as the template for the home page (Pages > Edit Page Layout).

Link Color - this also depends on the theme. All themes use the colors differently. Try changing the various colors under Preferences > Layout Settings. There are basic page colors (background color, link color, etc), and if you scroll down lower on the page there are extra colors (color 1, color 2). Don't change color 5, but all other colors can be adjusted to see what they affect on the site. Note, if there are CSS changes, you may need to view your site in an incognito window to view the changes because your browser may have cached the CSS file with the previous color settings.

[alanrichardtex]

Lauren, I just did this to try and shrink my carousel. and it did get it into the main text section, but it is still showing the images huge. is there a way I can put a maximum width and height for the carousel?

[ShopSite Lauren]

The Element themes always display the carousel at the full width of the area provided. You can make a minor modification to the element theme carousel include file to limit the area that the carousel is in.

1. Go to Merchandising > Custom Templates > Includes > Copy ShopSite Template, and make a copy of the "Element-Carousel.sst" include file.

2. Re-copy your copy and name it the exact same name as the original. Now you can delete your first copy and you should have an include file you can edit called "Element-Carousel.sst".

3. Edit the include file. At the very beginning, before any code, add <div class="container">. At the very end, after all the code, add </div>. Then save changes and publish (Utilities > Publish > Regenerate....you can also preview your home page first as well under Pages > Preview if you want to check it before publishing).


The Element-Carousel.sst include file should look like this when you are done:

Code: Select all

<div class="container">
[-- IF STORE.SlideHomePage EQ PAGE.RecordNumber --][-- VAR.SlideCount "0" --][-- FOR VAR.I 1 8 --][-- IF STORE.SlideDisabled[VAR.I] --][-- ELSE_IF STORE.SlideImage[VAR.I] --][-- VAR.SlideCount INC --][-- END_IF --][-- END_FOR --]
[-- IF VAR.SlideCount GE "1" --]<div id="carouselHome" class="carousel slide [-- STORE.SlidePager --]" data-ride="[-- IF VAR.SlideCount "1" --]false[-- ELSE_IF STORE.SlideAutoStart? "on" --]carousel[-- ELSE --]false[-- END_IF --]" data-interval="[-- STORE.SlideFrequency --]">
<div class="carousel-inner">
  [-- VAR.ICount 0 --][-- FOR VAR.I 1 8 --][-- IF STORE.SlideDisabled[VAR.I] --][-- ELSE_IF STORE.SlideImage[VAR.I] --]
    <div class="carousel-item[-- IF VAR.ICount 0 --] active[-- END_IF --][-- VAR.ICount INC --] slide[-- STORE.SlideTextAlignment[VAR.I] --]" style="color: #[-- Store.SlideDescColor[VAR.I] --]">
  [-- IF STORE.SlideURL?[VAR.I] NE no_link --]<a href="[-- IF STORE.SlideURL?[VAR.I] store_page --][-- STORE.SlidePageURL[VAR.I] --][-- ELSE --][-- STORE.SlideURL[VAR.I] --][-- END_IF --]" title="[-- STORE.SlideTitleText[VAR.I] --]"><img src=[-- STORE.SlideImage[VAR.I] --]></a>[-- ELSE --]<span><img src=[-- STORE.SlideImage[VAR.I] --]></span>[-- END_IF --]
  <div class="carousel-caption d-block">
    [-- IF STORE.SlideTitleText[VAR.I] --][-- IF STORE.SlideURL?[VAR.I] NE no_link --]<a class="h3" href="[-- IF STORE.SlideURL?[VAR.I] store_page --][-- STORE.SlidePageURL[VAR.I] --][-- ELSE --][-- STORE.SlideURL[VAR.I] --][-- END_IF --]" title="[-- STORE.SlideTitleText[VAR.I] --]" style="color: #[-- Store.SlideTitleColor[VAR.I] --]">[-- STORE.SlideTitleText[VAR.I] --]</a>[-- ELSE --]<h3 style="color: #[-- Store.SlideTitleColor[VAR.I] --]">[-- STORE.SlideTitleText[VAR.I] --]</h3>[-- END_IF --][-- END_IF --]
    [-- IF STORE.SlideDescText[VAR.I] --]<p class="d-none d-md-block" style="color: #[-- Store.SlideDescColor[VAR.I] --]">[-- STORE.SlideDescText[VAR.I] --]</p>[-- END_IF --]
    [-- IF STORE.SlideButtonText[VAR.I] --]<div class="d-none d-md-block"><a href="[-- IF STORE.SlideURL?[VAR.I] store_page --][-- STORE.SlidePageURL[VAR.I] --][-- ELSE --][-- STORE.SlideURL[VAR.I] --][-- END_IF --]" title="[-- STORE.SlideButtonText[VAR.I] --]" class="btn btn-primary" style="background:#[-- STORE.SlideButtonBkgrdColor[VAR.I] --];border-color:#[-- STORE.SlideButtonBkgrdColor[VAR.I] --];color:#[-- STORE.SlideButtonColor[VAR.I] --]">[-- STORE.SlideButtonText[VAR.I] --]</a></div>[-- END_IF --]
  </div>
</div>
[-- END_IF --][-- END_FOR --]
  </div>
[-- IF VAR.SlideCount GT "1" --][-- IF STORE.SlidePager NE no-pager --] <ol class="carousel-indicators container[-- VAR.HeaderFluid --]">
  [-- VAR.ICount 0 --][-- FOR VAR.I 1 8 --][-- IF STORE.SlideDisabled[VAR.I] --][-- ELSE_IF STORE.SlideImage[VAR.I] --]<li data-target="#carouselHome" data-slide-to="[-- VAR.ICount --]"[-- IF VAR.ICount 0 --] class="active"[-- END_IF --]>[-- VAR.ICount INC --][-- IF STORE.SlideLinkText[VAR.I] --][-- STORE.SlideLinkText[VAR.I] --][-- ELSE --][-- VAR.ICount --][-- END_IF --]</li>[-- END_IF --][-- END_FOR --]
  </ol>[-- END_IF --][-- END_IF --]
[-- IF VAR.SlideCount GT "1" --]  <a class="carousel-control-prev" href="#carouselHome" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#carouselHome" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a>[-- END_IF --]
</div>
[-- END_IF --][-- END_IF --]
[-- IF VAR.DisplayBannerGraphicNormal "yes" --][-- IF PAGE.Graphic --][-- IF PAGE.DisplayGraphic --]<div id="page-graphic" class="text-center mb-2 img-fluid-div">[-- PAGE.Graphic ONLY_ALT_TAG --]</div>[-- END_IF --][-- END_IF --][-- END_IF --]
</div>


[alanrichardtex]

I just did that, but I am still seeing the same issue. if you go to alandemo.alanrichardtextiles.com from a desktop browser you'll see what I mean. the first image looks ok. but the second one expands and becomes huge. I would like them to stay the same site. I also tried using ss_size2 options but that just made the image quality less.

[ShopSite Lauren]

I don't see the carousel on the home page. Is it on another page?

[alanrichardtex]

it is on the homepage of our demo site. not our live site. on some computers it would redirect us to the main site when we tried going to the demo site. but it should work when you type alandemo.alanrichardtextiles.com as long as you put alandemo. first