Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Llamablue1570047703

Member
  • Content Count

    25
  • Joined

  • Last visited

  1. To create an invert effect on a dark coloured logo add this to the CSS: body.collection-type-index .color-weight-dark #logo img { -webkit-filter: invert(100%); filter: invert(100%); } Filters are recent CSS features so this will work now in the later versions of Safari, Google Chrome and IE9+. Firefox will eventually support filters it seems.
  2. I checked how Forte manages the changing colours on the main screen and it uses the concept of colour adjustment based on Color Weight Light and Color Weight Dark. Here’s the CSS that you can copy and paste into your site Custom CSS Editor and change the colour scheme to suit. It includes all the elements including the title (e.g. body.collection-type-index .color-weight-light #logo .logo a) and nav (e.g. body.collection-type-index .color-weight-light #topNav .main-nav li a) and all other elements that change colour depending on the background colour weight. Note: Most of these use transition: … color to change from light to dark to light etc. So you can pick and choose what items you want to change. Let me know if its too tricky for you to modify. /* color adjustment based on fullscreen image */ body.collection-type-index .color-weight-light .nav-projects .arrow-wrapper a, body.collection-type-index .color-weight-light .nav-projects .arrow-wrapper:hover a { color: #fff; } body.collection-type-index .color-weight-light .nav-projects .arrow-wrapper { background-color: #111; } body.collection-type-index .color-weight-light #logo .logo a, body.collection-type-index .color-weight-light .logo-subtitle, body.collection-type-index .color-weight-light .ctrl-button.menu a, body.collection-type-index .color-weight-light #sqs-social a { color: #111; } body.collection-type-index .color-weight-light #topNav .main-nav li a { color: #111; } body.collection-type-index .color-weight-light #topNav .main-nav li.active-link span, body.collection-type-index .color-weight-light #topNav .main-nav li a:hover span { border-bottom-color: #111; } body.collection-type-index .color-weight-light #topNav .main-nav li.index-collection.active-link span { border-bottom-color: transparent; } body.collection-type-index .color-weight-light #topNav .folder .folder-child-wrapper ul.folder-child { background-color: #111; } body.collection-type-index .color-weight-light #topNav .folder .folder-child-wrapper ul.folder-child:before { color: #111; } body.collection-type-index .color-weight-light #topNav .folder .folder-child-wrapper ul.folder-child li:hover span, body.collection-type-index .color-weight-light #topNav .folder .folder-child-wrapper ul.folder-child li.active-link span { border-bottom-color: #fff; } body.collection-type-index .color-weight-light #topNav .folder .folder-child-wrapper ul.folder-child li a { color: #fff; } body.collection-type-index .color-weight-dark .nav-projects .arrow-wrapper a, body.collection-type-index .color-weight-dark .nav-projects .arrow-wrapper:hover a { color: #111; } body.collection-type-index .color-weight-dark .nav-projects .arrow-wrapper { background-color: #fff; } body.collection-type-index .color-weight-dark #logo .logo a, body.collection-type-index .color-weight-dark .logo-subtitle, body.collection-type-index .color-weight-dark .ctrl-button.menu a, body.collection-type-index .color-weight-dark #sqs-social a { color: #fff; } body.collection-type-index .color-weight-dark #topNav .main-nav li a { color: #fff; } body.collection-type-index .color-weight-dark #topNav .main-nav li.active-link span, body.collection-type-index .color-weight-dark #topNav .main-nav li a:hover span { border-bottom-color: #fff; } body.collection-type-index .color-weight-dark #topNav .main-nav li.index-collection.active-link span { border-bottom-color: transparent; } body.collection-type-index .color-weight-dark #topNav .folder .folder-child-wrapper ul.folder-child { background-color: #fff; } body.collection-type-index .color-weight-dark #topNav .folder .folder-child-wrapper ul.folder-child:before { color: #fff; } body.collection-type-index .color-weight-dark #topNav .folder .folder-child-wrapper ul.folder-child li:hover span, body.collection-type-index .color-weight-dark #topNav .folder .folder-child-wrapper ul.folder-child li.active-link span { border-color: #111; } body.collection-type-index .color-weight-dark #topNav .folder .folder-child-wrapper ul.folder-child li a { color: #111; }
  3. The alignment looks okay to me: At the moment you have two columns and two rows. Your site is not very wide. The images automatically resize based on the browser view size (i.e. adjust for mobile). You could override the CSS to set a specific width e.g. width: 20%; or width: 250px;. We do a lot of these changes for customers but customisation like this usually takes a bit of CSS coding. In the Style view you can access the Custom CSS Editor.
×
×
  • Create New...