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

kale

Circle Member
  • Content Count

    947
  • Joined

  • Last visited

  • Days Won

    10

kale last won the day on August 30 2017

kale had the most liked content!

About kale

  • Rank
    Circle Leader

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Hmm, try adding it to the actual specific pages that you want it to affect, and see if they change when in the index page. Think of an index page as just showing multiple pages in a list, so I think the style(s) of each page are probably retained. So, if you want the 3rd section of your index to have red h2, go to that page, go into the 'advanced' > 'page header' and put the style tags and css on that page, then see if it applies when viewing on the index.
  2. @mhossey Yeah, instead of adding the CSS to your custom CSS section, add it to your 'Page Settings' > 'Advanced' > 'Page Header Code Injection' area (of the page you want the CSS to apply to) But, you have to wrap the CSS in a style tag, like this: <style> h2 { color: red !important; } </style> Do that on the page(s) where you want a different h2 color and change the color to whatever you want on each page.
  3. I think this will do the trick. If you want to hide it on particular pages only, add this CSS (with style tags) to the Page Settings > Advanced > Page Header Code Injection area. Please note, if you already have style tags for other CSS for that page, don't add an additional set, simply add the CSS within existing style tags. <style> .title-desc-wrapper.has-main-image { display: none; } </style> If you'd rather apply it to every page on your site, add this to the 'Design' > 'Custom CSS' section (no style tags necessary). .title-desc-wrapper.has-main-image { display: none; }
  4. I don't think you are setting up these blocks correctly. You need to use div id's or classes and then place your content within those, something like this: You'd add a 'Markup Block' and then add this HTML: <div class="scenario"> <p>Here is some paragraph content</p> <ul> <li>Here is an unordered list item</li> <li>and another<li> </ul> </div> And then your custom CSS would be: .scenario { font-style: normal; text-align: left; font-weight: 300; font-size: 20px; line-height: 1.8em; color: #2e4259; text-align: center; } Try changing your HTML / CSS to that and see if it helps.
  5. Have you tried adding !important to the declaration? Like this: text-align: center !important; Otherwise, if that doesn't work, can you post a link to said markup block?
  6. If you want to affect blog titles with a media query, it would be this: @media only screen and (max-width: 640px) { .collection-type-blog article .entry-title { font-size: 12px; }}
  7. You can use a media query to adjust the font size based on the width of the window, try adding this to your Custom CSS section. @media only screen and (max-width: 640px) { #header h1.site-title { font-size: 24px; } } That will reduce the font size to 24px when the screen width is 640px or less. Adjust the font size (and/or max-width value) to your liking, but 640px and 480px are common values for max-width when targeting mobile devices.
  8. Not sure why I was down voted -- perhaps because I didn't specify that this was to remove a single time from the events lists without removing all times.
  9. EDIT: This is a method to remove a single time from an events list without removing all times from the list. This is not how you would hide the time from all events. I believe I have this solved (somewhat), however, it requires jQuery. It works by using a "unique" time to target and then add a custom class to it. Then, we hide that class and thus, hide the time. The custom time I've used is 1:23am -- so any event you want to hide the time on, you set the start time to that value. Unfortunately, if you have an event that starts at that exact time, this won't work. This is for the FIVE template, I'm not positive if it works for other templates. To install jQuery to your site, go to 'Manage Site' (gear icon) > 'Settings' > 'Code Injection' and paste this into the 'Header' <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> Next, go to your Events page, and go to 'Events Settings' > 'Advanced' and paste this into the 'Page Header Code Injection' <script> $( document ).ready(function() { $('.eventlist-meta-time:contains("1:23am")').addClass('hideTime'); }); </script> Lastly, go to your Custom CSS section, and paste this: .hideTime { display: none !important; } Now, as I mentioned above, in order for this to work, the event start time must match the value in the 'contains(" ") -- this can be changed to whatever time you want, but make sure you set the times of the events to match. Another thing to consider is that the time might show up in other places -- I have turned off the 'Event Date Label Time' in the 'Style Editor' (under 'Event Styles'). Another place where the time will show up is in the 'Calendar block' -- I decided to hide this for all events (aesthetically, I prefer them hidden) -- to do this, you would add this to your custom CSS: .sqs-block.calendar-block .yui3-calendar-day .event-menu .event-time-group .event-time { display: none; } This isn't a perfect solution, obviously, and I hope SQSP adds a 'hide time' and 'all day' event options -- as well as 'repeating events'.
  10. Yep, go to the page you want to hide the header and footer on, and go to Manage Site (gear icon) > Page Settings > Advanced and paste this into the Page Header Code Injection (be sure to include style tags): <style> #header, #footer { display: none } </style> That should do the trick. And to remove the header and footer across the site, add this to the Custom CSS Editor: #header, #footer { display: none }
  11. You're correct -- a 'Post Blog Item Code Injection' will accomplish what you're after. You can find the 'Post Blog Item Code Injection' in the 'Blog Settings' > 'Advanced' area (it's the 2nd box) You will need to use HTML to add content to that section -- by that, I mean you will need to use paragraph tags, and other html, rather than text boxes etc. It would look like this: <h2>About thenickrobinson</h2> <p>This is a paragraph about myself.<p> <p>You can use several paragraphs in here.</p> <p>You can also add pictures and additional formating, but that takes a bit more work and additional code.</p> Hope that helps.
  12. If you want this to be applied site wide, then you should use the custom CSS section, and will only have to add the CSS once -- if you want to control image captions on a single page, then you can use per page code injections and style tags. For a single, site wide adjustment, go to 'Change Style' (paintbrush) > 'CSS' (hit confirm) and copy / paste this: .sqs-block.image-block .image-caption-wrapper p { font-size: 16px; } And then 'Save' in the CSS window, and 'Save' again in the 'Style Editor' slide-out. If you want to control it on a page-per-page basis, you would instead go to the page in question, then go 'Manage Site' (gear icon) > 'Page Settings' > 'Advanced' > and paste this into the 'Page Header Code Injection' section (be sure to include style tags): <style> .sqs-block.image-block .image-caption-wrapper p { font-size: 16px; } </style> You would need to do this on any page you wanted the CSS applied.
  13. @physicswoman I think this is the CSS you'll need for Adirondack template: .main-image-wrapper .main-image { height: 200px; }
  14. Try adding this to the 'Page Settings' > 'Advanced' > 'Page Header Code Injection' (on the page you want this to be applied, so the homepage for you). Be sure to include the style tags <style> #main-navigation { position: fixed; } </style>
  15. The #hero is just the name of the element that whoever designed the template chose. A hero image is a common print / design term for the top main image on a page (I believe). This could have been named #banner or #banner-wrapper or something but they chose hero (which is why the original code didn't work). I believe the min-height offers the ability to grow beyond the value set. In other words, something with min-height says "I must be 'this' high, but I can be taller if space allows" -- vs -- height, which is a more definite value (not positive on this, though).
×
×
  • Create New...