Alexis J. Villegas

Forum Replies Created

Viewing 15 replies - 1 through 15 (of 42 total)
  • Plugin Author Alexis J. Villegas

    (@ajvillegas)

    Excellent, I’m glad I could help!

    Plugin Author Alexis J. Villegas

    (@ajvillegas)

    Hi @kaigraves23,

    The easiest way to override the CSS above is to add the CSS classes with some modification in the Customizer. Here are the steps you can take:

    1. Navigate to Settings > Widget Columns and select the second option “Do NOT load the CSS in the <head>…”. This will remove the CSS classes stylesheet from the website so you can add them manually.

    2. Navigate to Appearance > Customize > Additional CSS and add the following CSS styles:

    .one-half,
.one-third,
.two-thirds,
.one-fourth,
.three-fourths,
.one-sixth,
.five-sixths {
    float: left !important;
    margin-left: 2.5641025641026% !important;
}

.one-half {
    width: 48.717948717949% !important;
}

.one-third {
    width: 31.623931623932% !important;
}

.two-thirds {
    width: 65.811965811966% !important;
}

.one-fourth {
    width: 23.076923076923% !important;
}

.three-fourths {
    width: 74.358974358974% !important;
}

.one-sixth {
    width: 14.529914529915% !important;
}

.five-sixths {
    width: 82.905982905983% !important;
}

.first {
    clear: both !important;
    margin-left: 0 !important;
}

    Now the columns classes will be added manually to the <head> tag of your website with the !important property to make sure they are not overwritten by your theme or other plugins.

    Plugin Author Alexis J. Villegas

    (@ajvillegas)

    Hi @kaigraves23,

    The issue is with the .container-fluid class being added to each widget in your row. It assigns the following CSS which overwrites the columns classes assigned by the plugin:

    .container-fluid {
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-right: auto;
    margin-left: auto;
}

    The specific rules affecting the column classes are width: 100% and margin-left: auto. If you can remove the .container-fluid class from each widget, this would solve the problem.

    Let me know if this helps.

    Good luck with the website!

    Plugin Author Alexis J. Villegas

    (@ajvillegas)

    Hi John,

    I just wanted to let you know that the plugin has been updated with full support for the latest version of WordPress (5.4.1) and a new Spanish translation.

    Cheers!

    Plugin Author Alexis J. Villegas

    (@ajvillegas)

    Hello,

    The plugin is compatible with the latest version of WordPress and I still provide support, but I have not updated the status to reflect that. I will be updating the plugin in the next few days to ensure that warning does not come up anymore.

    Thanks for the reminder. I’ll update this thread when an update goes live.

    Cheers!

    Plugin Author Alexis J. Villegas

    (@ajvillegas)

    You’re welcome Natalie. Good luck with the website.

    Plugin Author Alexis J. Villegas

    (@ajvillegas)

    Hi Natalie,

    No problem, glad I could help!

    The message you are getting is caused by the comments in the CSS explaining what I did –?those lines that begin with /* and end with */. Remove them after pasting the CSS in the Additional CSS setting.

    Let me know if that works.

    Cheers.

    Plugin Author Alexis J. Villegas

    (@ajvillegas)

    Hi Natalie,

    I’m glad you found the plugin useful. By default the columns are not responsive since every use case is different and I didn’t want to make any assumptions. You could edit the CSS for each row as necessary by adding custom row classes.

    I looked at your page and here is how you can make the widget row responsive for your specific case:

    1. Add a custom class to the widget row. In this example I’m adding widget--home-row, to the Widget Row widget under Advanced options > CSS classes text field.

    2. Remove the current 200px right and left row padding by setting both values back to zero under Advanced options > Row padding.

    3. Remove the current widgets. I see that you are using a total of 9 widgets, one for each column section, but that is not necessary and would in fact make it impossible to stack up on smaller screens. Instead add 3 Custom HTML widgets and add the following code to each. I cleaned up your HTML and made some structural changes to make your code valid and more accessible (see bottom notes).??

    First widget:

    <div class="demobox">
    <h3 class="widget-heading">Candidates</h3>
</div>

<div class="text-wrap">
    <p>Looking for your next role?</p>
    <p>Need some help with interview preparation?</p>
    <p>Or a confidential chat about the market
        <br>and career options?</p>
    <p>Please send your CV or enquiries to:
        <br><a href="mailto:[email protected]">[email protected]</a></p>
</div>

<div class="center-text">
    <a class="button" href="/candidates">Find out more</a>
</div>

    Second widget:

    <div class="demobox">
    <h3 class="widget-heading">Employers</h3>
</div>

<div class="text-wrap">
    <p>Looking to register a job?</p>
    <p>Or want some market insight
        <br>or salary bench-marking?</p>
    <p>Contact us at:
        <br><a href="mailto:[email protected]">[email protected]</a></p>
</div>

<div class="center-text">
    <a class="button" href="/employers">Find out more</a>
</div>

    Third widget:

    <div class="demobox">
    <h3 class="widget-heading">Our Values</h3>
</div>

<div class="text-wrap">
    <p>At Marble Mayne we pride ourselves
        <br>on our core values:</p>
    <p><strong>Flexibility</strong></p>
    <p><strong>Quality</strong></p>
    <p><strong>Honesty</strong></p>
</div>

<div class="center-text">
    <a class="button" href="/values">Find out more</a>
</div>

    Make sure to add the extendedwopts-md-center class to each widget like you did before to retain the current center style. Also assign a Column width value o f 1/3 to each.

    4. Save each widget content.

    5. Navigate to Appearance > Customize > Additional CSS and add the following CSS styles. You could replace the current #demobox since I changed it to a class (see bottom notes).

    /* Convert #demobox into a class. */
.demobox {
    background-color: #6ea4ca;
    padding: 5px;
    border: 1px #6ea4ca;
    border-radius: 5px;
}

/* Add padding for text content wrapper. */
.text-wrap {
    padding: 50px 0 30px;
}

/* Assign h1 styles to widget heading. */
.widget-heading {
    font-size: 34px;
    margin: 33px 0;
}

/* Replicate the <center> tag style. Use on a <div> tag. */
.center-text {
    text-align: center;
}

/* Prevent column class margin from being overwritten by adding specificity. */
.widget--home-row .one-third {
    margin-left: 2.5641025641026%;
}

/* Prevent first column margin from being overwritten by adding specificity. */
.widget--home-row .first {
    margin-left: 0;
}

/* Center the custom widget row content. */
.widget--home-row > .wrap {
    margin: 0 auto;
}

@media only screen and (max-width: 767px) {
    /* Center columns on smaller screens. */
    .widget--home-row .one-third {
        width: 100%;
        margin-left: 0;
        margin-bottom: 40px;
        float: none;
    }
}

@media only screen and (min-width: 768px) {
    /* Add height for text content wrapper. */
    .text-wrap {
        min-height: 400px;
    }

    /* Adjust heading size as screen resizes */
    .widget-heading {
        font-size: 30px;
    }

    /* Match theme's max width value for custom widget row content. */
    .widget--home-row > .wrap {
        max-width: 750px;
    }
}

@media only screen and (min-width: 992px) {
    /* Add height for text content wrapper. */
    .text-wrap {
        min-height: 370px;
    }

    /* Adjust heading size as screen resizes */
    .widget-heading {
        font-size: 34px;
    }

    /* Match theme's max width value for custom widget row content. */
    .widget--home-row > .wrap {
        max-width: 970px;
    }
}

    Notes:

    1. In your Additional CSS content in the Customizer, you want to change #demobox to .demobox since you are using it multiple times in your HTML, and an ID should only be used once, whereas a class is meant to be used multiple times, otherwise your HTML is not valid (even thought it works).

    2. Don’t use more than one h1 tag on a page. You have too many right now and that could hurt your SEO. Use an h2 or h3 and create a custom class such as .widget-heading then assign the same styles you have for your h1. This way your HTML will be semantic and more accessible. This will also help your SEO and search engine indexing. For example:

    h3.widget-heading {
    font-size: 34px;
    margin: 33px 0;
}

    3. Avoid using the <center> tag since it is desecrated in HTML5, and although it might work in some browsers, it could be dropped at any time. Use text-align: center in your CSS instead. You could wrap the button link on a <div> with a .center-text class to get the same effect. For example:

    div.center-text {
    text-align: center;
}

    4. You shouldn’t use the target="_blank" attribute for opening links on new pages as you had on the button links, since they not only point to the same website, but they can also have a negative effect on accessibility. It does not provide a good user experience for screen reader users, and generally the attribute should always be avoided.

    I hope this helps you. Let me know if it worked, and good luck with the website!

    Plugin Author Alexis J. Villegas

    (@ajvillegas)

    I’m glad you got it to work! Good luck with the site.

    Plugin Author Alexis J. Villegas

    (@ajvillegas)

    Hi @digboston,

    The issue is with line 1021 in your main stylesheet (style.css) in your theme. The Featured Content widget area is clearing the floats for all elements inside and is breaking the layout.

    Comment line 1021 (clear: both;) in style.css to look like this:

    .featured-content {
    /* clear: both; */
    overflow: hidden;
}

    This should fix the issue. Also you assigned “1/3” to the first widget, but “1/2” to the second. Make sure the fractions add up to one so the layout doesn’t break. The second widget should be “2/3” for it to work as expected, or both “1/2” as stated above.

    Let me know if this works for you.

    Plugin Author Alexis J. Villegas

    (@ajvillegas)

    Hello @unconsultancy,

    I’m glad you found the plugin useful!

    The plugin doesn’t include responsive styles for columns as a feature since I didn’t want to make any design decisions better handled by the theme. Under ‘Settings’ > ‘Widget Columns’ you can choose to not load the column classes CSS and copy the provided styles into your theme’s stylesheet (usually style.css) to customize the column widths and behavior.

    With that said, I looked at your theme, and here is how you can make the columns responsive and behave similarly to how columns behave on your theme right now:

    1. Go to ‘Settings’ > ‘Widget Columns’ and select the second option “Do NOT load the CSS in the <head>”. Click the “Save changes” button.

    2. Go to your footer area sidebar and make sure to add a “– Widget Row –” widget above your three widgets. This will wrap the widgets in a .widget-row div and assign the .first class to te first widget. This is important for styling and to make sure your widgets align with other elements in your theme (it is also necessary if you want to stack multiple widget rows in the sidebar area).

    3. Now go to your theme’s stylesheet (style.css) and add the following modified column classes CSS to the end of the file:

    
/*
 * Column Classes
 *
 * Link: https://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css
 */

.one-half,
.one-third,
.two-thirds,
.one-fourth,
.three-fourths,
.one-sixth,
.five-sixths {
    float: left;
    margin-left: 2.5641025641026%;
}

.one-half {
    width: 48.717948717949%;
}

.one-third {
    width: 31.623931623932%;
}

.two-thirds {
    width: 65.811965811966%;
}

.one-fourth {
    width: 23.076923076923%;
}

.three-fourths {
    width: 74.358974358974%;
}

.one-sixth {
    width: 14.529914529915%;
}

.five-sixths {
    width: 82.905982905983%;
}

.first {
    clear: both;
    margin-left: 0;
}

/* Style .widget-row .wrap the same as .section-wrap in theme */
.widget-row .wrap {
    margin: 0 auto;
    max-width: 1100px;
    padding: 0 50px;
}

/* Override the .widget--footer styles when inside a .widget-row */
.widget-row .widget--footer {
    max-width: inherit;
    padding: 0;
    margin-left: 2.5641025641026%;
    margin-right: 0;
}

.widget-row .first.widget--footer {
    margin-left: 0;
}

/* Media Queries */

@media only screen and (max-width: 900px) {
    .one-half,
    .one-third,
    .two-thirds,
    .one-fourth,
    .three-fourths,
    .one-sixth,
    .five-sixths {
        float: none;
        margin-left: 0;
        width: 100%;
    }
	
    .widget-row .widget--footer {
        margin-left: 0;
    }
}

    Please note that I added styles specific to your theme that will override the default footer widgets behavior only when defining a widget row using the “– Widget Row –” widget at the start of a row. You can adjust row padding and margin under “Advanced settings” in the “– Widget Row –” widget.

    Please let me know if this works for you. Good luck!

    Plugin Author Alexis J. Villegas

    (@ajvillegas)

    @ztvmark,

    ?Muchas gracias! Me alegra mucho que te haya servido bien.

    Plugin Author Alexis J. Villegas

    (@ajvillegas)

    Excellent, glad to hear it worked!

    Cheers.

    Plugin Author Alexis J. Villegas

    (@ajvillegas)

    Hello @spino27,

    It doesn’t look like you are using the “Widget Row” widget before the News & Upcoming Events widget to declare a row. The .full-width class only works under a .widget-row parent (e.g., the CSS selector is “.widget-row .full-width”).

    Try adding a “Widget Row” widget right before the News & Upcoming Events widget, then re-assign the “1/1” (full-width) value to it. Assigning a width value to widgets without using the “Widget Row” widget at the beginning of a column row can have unexpected results.

    This should fix your issue, but if it doesn’t, please let me know and we’ll figure it out.

    Good luck.

    Hello,

    Changing the WordPress Address (URL) and Site Address (URL) will not work and will probably break your website (white screen of death). Since website1.com and website2.com are essentially two separate sites what you need to do is migrate the development site over to the production server. If for example, you need to move website2.com to where website1.com is being hosted, then you’ll need to not only move all the files over from the website2.com server to the website1.com server, but you’ll also need to update all the URL instances of website2.com in the database and replace them with website1.com.

    There are plugins that make this easy. I’ve had success with the premium BackupBuddy. It is a paid, but well worth it. Some other free alternatives are the Duplicator plugin and the All-in-One WP Migration plugin.

    Here are some useful tutorials using the two free plugins I mentioned above:

    – Move a WordPress Site with the Duplicator Plugin (https://wpshout.com/quick-guides/move-a-wordpress-site-with-the-duplicator-plugin/)
    – How to Migrate your Site with All-in-One WP Migration (https://wpshout.com/quick-guides/all-in-one-wp-migration/)

    I hope this helps. Cheers.

Viewing 15 replies - 1 through 15 (of 42 total)