Home Forums Weaver Xtreme Theme css snippet

This topic contains 13 replies, has 3 voices, and was last updated by  scrambler 2 days, 23 hours ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #52792

    pella
    Participant

    Hi,

    I would like to use a cool css-snippet on my site, link:

    https://codepen.io/tyrellrummage/pen/wqGgLO

    But I don’t seem to get it to work well, and I don’t want to experiment too much with the css in case I do something I can’t repair.
    I’ve tried to put the html on one page, and the css in the “custom css rules” I also renamed some items, like,  class:wrapper to .wrapperflip, as I assume there already exists a wrapper in the original file.

    How do I manage to integrate this snippet on my site?

    About the fonts – do they work or do I have to change fonts?

    I also have a weaver II theme-site that I want to put it on. *not ready to let go of weaver II here*

     

    #52793

    scrambler
    Moderator

    You can really break anything that cant be repaired by putting HTML in a page and CSS rule in the custom CSS Rule box.

    When you don’t want it remove it, and everything will be back to normal.

    First thing, is change ALL the classes by adding the my prefix, like instead of wrapper use mywrapper etc… Do that both in the HTML and The CSS. The reason for that is because many of theses classes already exist in weaver, and so it will mess things up.

    once you so that without mistakes, then it should work just fine.

    Now about your remark *not ready to let go of weaver II here*

    There is really no good reason for that. Xtreme Does everything weaver II does plus more, and has a similar setting interface, so staying on a widely obsolete and unsupported theme is really without merit 🙂

    #52794

    pella
    Participant

    Thanks for your answer, I’ll try again to rename the stuff in the snippet.

    About weaver II.

    I love the theme, the weaver extreme too, BUT I’ve had some difficulties with menus, and some other small details, that I like the way they look in Weaver II.

    Let me know how I easily modify the menu and the header, well, all the content of the page to have the same width, preferably not full width (but I could live with that too). I want the primary menu direct under the header, and the secondary on top, above the header.

    Comparison : http://www.wp.pella.se/  (weaver II)

    http://hej.pella.se/ (weaver extreme)

    On this one, http://hej.pella.se/, please check the pages “Event” and “Ny test ordinary table” on a mobile unit. I have a Samsung S7, Android, and it looks better with a table the old fashioned way, even if I have to rotate the phone. What do you think?

    Is there a way to make the columns static and look good on all screensizes?

     

    #52795

    scrambler
    Moderator

    Your Xtreme site is using a default sub theme with some full width area.

    You can go to Main options > Full Width, and uncheck ALL the full width option there, and it will go back to being like the old weaver II.

    The sub theme you chose also has the primary menu set to be fixed on top, this is an option you can change in main options > Menus > Primary Menu > Fixed on top drop down list.

    basically you chose a sub theme that has a lot of options selected that apparently you don’t want. You could either have selected a different sub theme, or you can explore all the options to change it back to what you want.

    But Xtreme will easily recreate the exact same layout as your weaver II site once all the proper options have been set.

    About your event table, is the issue you are having that when the browser gets smaller, the third column is stacking?

    If so, it is because you forgot to add the mobile rule (starting with .is-mobile)I had given you the last time. I don’t remember the thread where I had given it to you, if you dig up the thread and let me know I will tell you what rule I mean.

     

    #52797

    pella
    Participant

    Hi!

    Honestly, I don’t know if I was even aware of that I’ve chosen a subtheme… !

    How do I change it back, do I loose much of my settings if I do?   * I’d like to see what it looked like from the start* 

     

    Yes, it’s the stacking I don’t like, It makes it difficult to read the table properly.  But I did put the code as you wrote it. This is from my css-custom:

    .content-3-col.mydate {width:15%;}
    .content-3-col.mycontent {width:60%;}
    .content-3-col.myinfo {width:25%;}
    .mytitle {clear:both;overflow:hidden;background-color:yellow;}

    .myoddcol {clear:both;overflow:hidden;background-color:white;color:black;}
     
    .is-mobile #wrapper .content-3-col {clear:none !important;}

     

    ***********”    note; Already checked the “Fixed on top” drop down list,

    Theese are the settings right now:

    https://screenshots.firefox.com/P2aw3RXWFTX1Ek8Q/hej.pella.se

    #52800

    Weaver
    Keymaster

    If you have made customizations to any sub-theme or custom created design, they will be discarded if you switch to a different sub-theme.

    But note that you can save a copy of your current settings from the dashboard -> Appearance -> Weaver Xtreme Admin -> Save/Restore tab. (Requires Weaver Xtreme Theme Support plugin).

    So you will have to figure out the full width options. Note that narrow themes (less than 1600px or so) really look dated these days on notebooks and desktops with 2k – 1920 by 1080 – screens, which is the norm these days.

    #52802

    scrambler
    Moderator

    As far as playing with Sub Theme, as Weaver mentioned, Make sure to download a copy of your setting first, so you can restore them, because switching sub theme will ooose all of your settings.

    If you have done a lot of customization, it is best to move forward by changing the options you do not like. Whatever you see is not a “limitation” of the theme, but an “option” being used, everything can be changed.

    The mobile rule is not working, because some formatting character got pasted in your CSS ( )

    Remove that so the rules look like

    .content-3-col.mydate {width:15%;}
    .content-3-col.mycontent {width:60%;}
    .content-3-col.myinfo {width:25%;}
    .mytitle {clear:both;overflow:hidden;background-color:yellow;}
    .myoddcol {clear:both;overflow:hidden;background-color:white;color:black;}
    .is-mobile #wrapper .content-3-col {clear:none !important;}

    “Already checked the “Fixed on top” drop down list,”

    Confused… If you check fixed on top, then the primary menu will be “Fixed on top” and NOT below the header image.

    If you want it under the header image as you said previously, then check NOT fixed

    #52811

    pella
    Participant

    Hi, I know now this thread hase gona a little out of topic,

    Now I’ve changed my weaver II site to Xtreme….. 

    But I don’t understand where or why my primary menu act so weird…? It’s placed with a hugh distance below the header….

    I chosed no subthemes, started from original, and have exactly the same menu-settings as on

    http://by.smalltowncowboys.se/

    the actual site is  http://www.wp.pella.se/

     

     

    #52812

    scrambler
    Moderator

    You have a custom CSS rule adding a 900px top margin to it

    .menu-primary .wvrx-menu-container{margin-top:900px;}

    Check the menu options you may have that value in Main Options > Menus > Primary Menus > Menu Top Margin box

    #52813

    pella
    Participant

    Thanks! 

    It was under

    Main Options > Menus > Primary Menus > Menu Top Margin box> Meny Bar Spacing>Meny Top Margin

     

     

    #52840

    pella
    Participant

    Back to the CSS-snippet.

    I have now put the snippet on my site

    http://hej.pella.se/?page_id=306

    After having changed the classes to “my -container” and so on in the html and css- code.

    I guess the font-sizes are fixed, or why don’t they fit in the card-container?

    (Cool effect that i didnt see at first, is that the text is mirrored when card is upside down!   )

    I guess that the containers also changes width and height depending on how many containers there are and  how much space (width) they get in the code?

    Link  to the original snippet:

    https://fribly.com/2017/11/21/parallax-flipping-cards/

    http://www.bypeople.com/css-cards/

    Have a nice day!

     

     

    #52845

    pella
    Participant

    Another question:

    I’m trying to put my own pics in the boxes, so I used the pics in my library, right-clicked and chose “copy imgadress/url” and pasted into my html-code instead of the original one. But it doesn’t work.

    Which url do my pics get when I upload them to wordpress? Where do I find it?

    #52848

    Weaver
    Keymaster

    When using images from the media library, it is usually best to simply add them to your content using the media library insert option. When done that way, the images will be styled to match your theme.

    You have options for size, alignment, caption, etc.

    Otherwise, you should be able to use an HTML <img> tag, but you should also add styling.

     

    #52853

    scrambler
    Moderator

    Regarding the font size, they are set by one of your custom CSS rules to  font-size: 1.5rem;

    And this is what you are getting. If they are too bog, change the CSS

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

You must be logged in to reply to this topic.