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

squaresporks

Member
  • Content Count

    151
  • Joined

  • Last visited

3 Followers

Recent Profile Visitors

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

  1. Are any of your other links italic and/or all caps? There's probably some out of control setting or CSS that needs to be tracked down, but without seeing your site, I can only offer a general bandaid of an answer. Try adding the following to Design > Custom CSS: h3 a { font-style: normal; text-transform: none; } If that doesn't work, then try h3 a { font-style: normal !important; text-transform: none !important; } You can also try: h3 a { font-style: inherit; text-transform: inherit; } and h3 a { font-style: inherit !important; text-transform: inherit !important; }
  2. There are a lot of pure CSS solutions if that's what you want. Try googling: read more pure CSS I prefer CSS plus Javascript, because usually there is less markup, and CSS solutions don't work easily with multiple articles on one page. Either way, you will have to do some markup. Here's a CSS/JS way: (If you google, there are many, many other ways out there, probably some better and simpler. I can imagine, for example, that with a more complicated javascript, you could reduce the markup to almost none.): DEMO https://cello-cobalt-ygxa.squarespace.com/readmore Password: showmestuff HTML Use a markdown or code block. You can add as many posts as you want. This example has just one: <div class="my-container"> <div class="my-post"> <div class="my-excerpt"> <p>Alii pertinacia quo at. Bonorum oporteat concludaturque ne sed, te quod nullam eos. Ei qui decore oporteat. At noster principes duo, brute labores mei id. Est cu minimum legendos, qui ex minim docendi suscipit. Vim no eius epicurei oportere.</p> </div> <div class="my-therest"> <p>Eos ad reque putant vivendo. Vel primis volumus accusata an, at pro vide utamur. Usu modus suscipit euripidis ex, aeque saperet nusquam ut eos. Cum cu cibo dicat dolorem. Quo veri nobis id. Cum at inermis omittantur. Pertinax cotidieque deterruisset at usu. Nam facer petentium definitiones ei, ad probo omittantur eam, nec iisque saperet adversarium ea. Mei ex probatus appellantur philosophia, ea suas postea quo, eu rebum dolores qui. At zril pericula reprimique duo, qui eu maiestatis argumentum cotidieque.</p> </div> <div class="my-button"> <a class="my-link" onclick="reveal(this);">READ MORE</a> </div> </div> </div> CSS Add this to Design > Custom CSS (do this only once) .my-container { text-align:center; } div.my-post { display:block; vertical-align: top; text-align:left; margin-bottom:1em; padding:1em; background-color: #EEE; } div.my-excerpt, div.my-therest { font-size: 1em; line-height: 1.35em } div.my-excerpt > p { margin-top:0em; } div.my-therest { display:none; margin-top:.75em; } .my-button { margin-top: .5em; font-size: .75em; text-decoration: underline; cursor:pointer; } .my-link { color:#AA0000; } JAVASCRIPT Add this to Settings > Advanced > Code Injection > Header (do this only once) <script type="text/javascript"> function reveal(thelink) { //Get the parts var thediv = thelink.parentElement.parentElement.children[1]; var theinnerHTML = thelink.innerHTML; if (theinnerHTML=="READ LESS") { //Close the post thediv.style.display = "none"; thelink.innerHTML="READ MORE"; } else { //Optional: close expanded posts var therests = document.getElementsByClassName("my-therest"); for (var i = 0, len = therests.length; i < len; i++) { therests[i].style.display = "none"; } var thelinks = document.getElementsByClassName("my-link"); for (var i = 0, len = thelinks.length; i < len; i++) { thelinks[i].innerHTML="READ MORE"; } //Reveal the rest of the post thediv.style.display = "block"; thelink.innerHTML="READ LESS"; } } </script>
  3. You have to be on the blog page. Then go to Design > Site Styles. Type blog or more in the search field. Your template might not have that option. But if it doesn't happen everywhere, I doubt the color is the problem.
  4. You can use Chrome developer tools to find the class. I can't give an specific answer without access to your site. See: Settings > Site Visibility > Password Protected.
  5. What template are you using? Does that happen for all posts? Did you check Site Styles and make sure the Read More Link Color is not that same as the page background color?
  6. IDs that start with YUI are not considered reliable. The following attempts to fill the entire space between the rules, hide the rules, and maintain spacing. I could only test it on Safari. #featured-pages { background-color:#ddeeee !important; top:-26px; bottom:-26px; padding-top: 26px; padding-bottom: 26px; } #block-yui_3_17_2_1_1548047166885_128933 { visibility:hidden; } #block-yui_3_17_2_15_1513861642692_12284 { display:none; } Another version. This one keeps the rules and white margins left/right: #featured-pages { background-color:#ddeeee !important; top:-26px; bottom:-26px; padding-top: 25px; padding-bottom: 25px; border-top: solid 1px rgba(15, 159, 125, 0.772549); border-bottom: solid 1px rgba(15, 159, 125, 0.772549);; margin-left:35px; margin-right:35px; } #featured-pages .Index-page-content { padding-left:12px !important; padding-right:12px !important; } #block-yui_3_17_2_1_1548047166885_128933 { visibility:hidden; } #block-yui_3_17_2_15_1513861642692_12284 { display:none; } BONUS: Improved (?) text flow in narrow windows: #featured-pages p, #featured-pages a, #featured-pages h3 { overflow: hidden !important; }
  7. The following is for the logo in the header. I don't see a logo in the Brine footer. What template are you using? First check Site Styles to see if the logo sizes are determined there. The Brine template has two logo width settings, one of which is for mobile. Type "logo" in the search box at the top of Site Styles. Also check the mobile break point. 640px is the usual setting. The CSS examples below work for Brine, but the classes might be different for your template. .Mobile-bar-branding-logo { width:140px; } .Header-branding-logo { min-width: 240px; } You can also use @media statements and break points. E.g.: @media only screen and (max-width: 800px) { Header-branding-logo { width: 240px; } }
×
×
  • Create New...