Viewing 20 posts - 1 through 20 (of 20 total)
  • Website CSS – just trying to make things simple!
  • Premier Icon chiefgrooveguru
    Free Member

    One of the joys of the pandemic is that I’m currently operating my business on a shoestring to survive these non-gigging time (we sell high end guitar and bass amp stuff) so I’m having to learn how to do things I used to have other staff to do…

    I’m not trying to do anything fancy – I’ve been writing a load of blogs about geeky speaker stuff and having put a bunch of links into the text it’s messed up the formatting by making every link a larger caps font which also screws up the line spacing. I’ve spent so long trying to work out what style sheet is defining this and what the a { thingy } code is saying but I’m defeated!

    Can anyone help?

    Premier Icon dakuan
    Free Member

    do you have a link?

    Premier Icon poly
    Free Member

    I can’t help – I’ve never got on well with CSS. But are you writing directly in HTML or using some sort of content managemeant system (like WordPress)…

    Premier Icon chiefgrooveguru
    Free Member

    Thanks! This is the current irritation:

    https://barefacedaudio.com/blogs/articles/getting-the-guitar-tone-you-want-custom-celestion-choices

    The platform is Shopify. My prior staff have made it quite complex by also using custom code. I can edit the blogs like this in the platform but it doesn’t show the formatting until I preview them. With the product pages I have to do it all in code…

    We’re very much a substance over style, content over cosmetics business, so I’m happy to strip back the look just as much for the vibe as well as for the ease of editing and adding content.

    Premier Icon nbt
    Full Member

    Use “developer tools” in your browser – in chrome that’s accessed by hittiong f12. You can then go to the “elements” tab and use the icon in the top left (arrow pointint into a box) which will highlight in source code the element your mouse is pointing at. CLick on it the the CSS will be shown in the “styles” box, from weher you can find the applicable style and then find the same in your source code

    Premier Icon darthpunk
    Free Member

    here’s the offending article, line number 5, take out the text-transform and all the links will go back to regular case:
    <div class=”styles-section-title styles-selector”></div>
    <div class=”style-properties matched-styles monospace styles-panel-hovered”>

    .rte a:not(.btn) {
    border-bottom: none;
    padding: 0 5px;
    height: 45px;
    line-height: 45px;
    text-transform: uppercase;
    text-decoration: none;
    color: #0e1ecc;
    }

    </div>

    Premier Icon kingmod
    Free Member

    .rte a:not(.btn) {
    border-bottom: none;
    padding: 0 5px;
    height: 45px;
    line-height: 45px;
    text-transform: uppercase;
    text-decoration: none;
    color: #0e1ecc;
    }

    This is the offending code.

    Premier Icon nbt
    Full Member

    Looks like it’s “.rte a:not(.btn)” which has “text-transform: uppercase”

    I actually use IE developer tools as it’s got a slightly better user interface for this kind of thing than chrome – you can literally right click the element you want and choose “inspect” then turn off individual style elements

    Premier Icon dakuan
    Free Member

    bad css

    this is the offending CSS class

    Premier Icon chiefgrooveguru
    Free Member

    Thank you so much!!! I’ll be back next time I get stuck, I’ve wasted hours on this!

    Premier Icon chiefgrooveguru
    Free Member

    Sorry, I’m still not managing to do this. I can see how to inspect and find the items now. But I can’t see how to relate those items to the stuff on the server. How do I find out which CSS the web page pulls from?

    Premier Icon leffeboy
    Full Member

    it tells you which css file and even the line number.  In this case it is getting-the choices line 849.  If you hover over it you will see the full path

    but…. beware.  Some of the files are scss rather than css.  You CAN alter the css file directly, and it’s a quick and dirty way to do and will work, but the next time someone compiles the scss files it will overwrite your css files :(.  If all you are doing is keeping it going until you can get someone else to fix it later that is fine.  If you want to learn how to compile scss files down to css then Koala-app is a not bad way to get up and running quickly.  If you are comfortable messing around with css then you will be fine with Koala

    Premier Icon chiefgrooveguru
    Free Member

    Ok, I sort of understand but I’m still stuck. I have access to the text content of that page via a text or html editor but that just gives me the text plus basic line breaks and paragraphs etc.

    That getting-the-choices line 849 doesn’t seem to be accessible anywhere. If I go into “edit code” on the Shopify themes I can have all these templates:

    404.liquid
    article.liquid
    blog.alternate.liquid
    blog.feedback.liquid
    blog.GX .liquid
    blog.liquid
    cart.elspw-json.liquid
    cart.liquid
    cart_elspw_backup.liquid
    collection.2nd.liquid
    collection.Bass.liquid
    collection.Bass2.liquid
    collection.Guitar.liquid
    collection.GX.liquid
    collection.liquid
    collection.Speaker.liquid
    customers/account.liquid
    customers/activate_account.liquid
    customers/addresses.liquid
    customers/login.liquid
    customers/order.liquid
    customers/register.liquid
    customers/reset_password.liquid
    gift_card.liquid
    index.liquid
    list-collections.liquid
    page.alternate.liquid
    page.contact.liquid
    page.Custom banner.liquid
    page.feedback.liquid
    page.GX.liquid
    page.liquid
    page.Meet the team.liquid
    page.photos.liquid
    page.Players.liquid
    page.Team banner.liquid
    password.liquid
    product.12XN.liquid
    product.Alnico.liquid
    product.Baffle.liquid
    product.BB.liquid
    product.BT.liquid
    product.Classic.liquid
    product.Custom Bobb.liquid
    product.EIGHT10.liquid
    product.FOUR10.liquid
    product.Grill.liquid
    product.GX.liquid
    product.GXII Speaker.liquid
    product.GXII.liquid
    product.GXiiHold.liquid
    product.Heritage.liquid
    product.liquid
    product.Machinist.liquid
    product.ONE10.liquid
    product.One10T.liquid
    product.Radical212.liquid
    product.Reality.liquid
    product.Reformer112.liquid
    product.SC.liquid
    product.Signature.liquid
    product.simple.liquid
    product.SIX10.liquid
    product.SM.liquid
    product.ST.liquid
    product.Test.liquid
    product.Test2.liquid
    product.Tolex.liquid
    product.TWO10.liquid
    product.Unloaded.liquid
    product.Uprising212V.liquid
    product.Upsetter110.liquid
    product.Usurper210H.liquid
    product_elspw_backup.liquid
    search.liquid
    Add a new section
    article-template.liquid
    blog-template.liquid
    cart-template.liquid
    collection.liquid
    collection-list.liquid
    collection-template.liquid
    custom-content.liquid
    feature-columns.liquid
    feature-row.liquid
    featured-blog.liquid
    featured-product.liquid
    footer.liquid
    Guitar.liquid
    header.liquid
    hero.liquid
    image-bar.liquid
    list-collections-template.liquid
    logo-bar.liquid
    map.liquid
    newsletter.liquid
    password-content.liquid
    password-footer.liquid
    password-header.liquid
    powr-image-slider.liquid
    product-custom-template.liquid
    product-template.liquid
    Product-template2.liquid
    Product-template3.liquid
    Product-template4.liquid
    quotes.liquid
    Reality.liquid
    Reformer.liquid
    rich-text.liquid
    slideshow.liquid
    Speaker.liquid
    Upsetter.liquid
    UpsetterProduct.liquid

    But I can’t find it in them… Dammit Jim, I’m a Mechanical Engineer, not a Computer Scientist!

    Premier Icon leffeboy
    Full Member

    My apologies, it wasn’t in that file, that appears to be the text, I don’t normally use shopify.

    I’m not entirely sure what you are doing is the correct solution.  You have other pages such as this one

    Ordering and availability – Barefaced Audio

    that don’t have that problem.  There is something about the styling on that particular sort of article that is causing the problem.  You might be able to fix it with css but that might also be wrong :(.  I have to say that I looked at the page and it really didn’t bother me.  It might not be ideal but it really didn’t register as an issue.  As you say, content over style

    Premier Icon chiefgrooveguru
    Free Member

    I was trying to use the “blog” section of Shopify but that’s a good point. If I create them as a different sort of page I can probably avoid the issue entirely!

    I’ll give it a go!

    Premier Icon leffeboy
    Full Member

    it does look as though standard pages don’t have that issue.  Check what sort of page I linked to earlier was

    Premier Icon mrsheen
    Free Member

    I’m just learning coding so just limited experience but I’ve been using codepen which has the screen divided so you write html in the left column, CSS in the middle and JavaScript in the right column. It might help to see in future any errors more clearly?

    Premier Icon maccyb
    Free Member

    I also run Shopify sites… and have a third-party doing the heavy lifting on the development. As you have seen you don’t have access to the CSS files directly in the Shopify code, probably because the third-party is generating them separately.

    What you can do in this situation – an ugly hack, but it should (might?) work – is to insert a new CSS rule in the document itself. The point of CSS is that rules ‘cascade’ down so a rule defined early in the structure (e.g. by a CSS file loaded in the header) can be overridden by a more ‘local’ rule for the same element.

    There’s also a flag “!important” which can tell the web page to use this rule whenever there are multiple rules in force.

    Hence, if you insert something like:

    <style>
    .rte a:not(.btn) {
    line-height: normal !important;
    text-transform: none !important;
    }
    </style>

    directly in your page (within the <body> section), that may work… I’d test it myself, but I am on holiday and have no desire to fire up my work laptop and sign in…

    Premier Icon creakingdoor
    Free Member

    FWIW
    I know less than nothing about guitars, and even less than that about IT. However the line spacing in that blog article didn’t offend my eyes at all. You may be overly critical of it.
    This

    I have to say that I looked at the page and it really didn’t bother me. It might not be ideal but it really didn’t register as an issue. As you say, content over style

    Premier Icon danposs86
    Full Member

    Try not to use the !important tag, just add to your css selector, like so:

    <style>
    body .rte a:not(.btn) {
    line-height: inherit;
    text-transform: inherit;
    }
    </style>

    Also, setting the line-height to inherit means it will use the same line height as parent elements. Same for text-transform.

Viewing 20 posts - 1 through 20 (of 20 total)

You must be logged in to reply to this topic.