Hello,
I am also looking to align the copyright text of footer to the middle of the page.
I circled both the social media icons and the copyright text but im just looking to align the copyright text to the center.
My site is https://villagetoolz.myshopify.com/
{%- assign social_icons = false -%}
{%- assign inline_list = false -%}
{%- assign locale_selector = false -%}
{%- assign country_selector = false -%}
{%- assign show_payment_icons = false -%}
{%- assign show_selectors = false -%}
{%- assign show_country_selector = section.settings.show_currency_selector -%}
{%- if show_country_selector and localization.available_countries.size > 1 -%}
{%- assign country_selector = true -%}
{%- endif -%}
{%- if section.settings.show_locale_selector and localization.available_languages.size > 1 -%}
{%- assign locale_selector = true -%}
{%- endif -%}
{%- if section.settings.show_payment_icons -%}
{%- unless shop.enabled_payment_types == empty -%}
{%- assign show_payment_icons = true -%}
{%- endunless -%}
{%- endif -%}
{%- if country_selector or locale_selector -%}
{%- assign show_selectors = true -%}
{%- endif -%}
{%- if
settings.social_twitter_link != blank
or settings.social_facebook_link != blank
or settings.social_pinterest_link != blank
or settings.social_instagram_link != blank
or settings.social_tumblr_link != blank
or settings.social_snapchat_link != blank
or settings.social_youtube_link != blank
or settings.social_vimeo_link != blank
or request.page_type == 'article'
or request.page_type == 'blog'
-%}
{%- assign social_icons = true -%}
{%- endif -%}
{%- assign payment_width_class = "one-half" -%}
{%- if show_selectors -%}
{%- unless social_icons -%}
{%- assign payment_width_class = "" -%}
{%- endunless -%}
{%- endif -%}
{%- assign copyright_show_class = "medium-up--hide" -%}
{%- if social_icons -%}
{%- unless show_selectors -%}
{%- assign copyright_show_class = "" -%}
{%- endunless -%}
{%- endif -%}
{%- case section.blocks.size -%}
{%- when 1 -%}
{%- assign footer_item = 'site-footer__item--full-width' -%}
{%- assign inline_list = true -%}
{%- when 2 -%}
{%- assign footer_item = 'site-footer__item--one-half' -%}
{%- assign inline_list = true -%}
{%- when 3 -%}
{%- assign footer_item = 'site-footer__item--one-third' -%}
{%- for block in section.blocks -%}
{%- if block.type == 'newsletter' -%}
{%- assign footer_item = 'site-footer__item--one-quarter' -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- when 4 -%}
{%- assign footer_item = 'site-footer__item--one-quarter' -%}
{%- when 5 -%}
{%- assign footer_item = 'site-footer__item--one-fifth' -%}
{%- endcase -%}
{% comment %} Create an appropriate hover color based on text color and brightness {% endcomment %}
{%- assign footer_text_color = section.settings.color_footer_text -%}
{%- assign footer_text_color_brightness = section.settings.color_footer_text | color_brightness -%}
{%- if footer_text_color_brightness <= 26 -%}
{%- assign footer_text_color_hover = footer_text_color | color_lighten: 25 -%}
{%- elsif footer_text_color_brightness <= 65 -%}
{%- assign footer_text_color_hover = footer_text_color | color_lighten: 15 -%}
{%- else -%}
{%- assign footer_text_color_hover = footer_text_color | color_darken: 10 -%}
{%- endif -%}
{%- capture payment_icon_markup -%}
{%- if show_payment_icons -%}
{{ 'general.payment.method' | t }}
{%- for type in shop.enabled_payment_types -%}
- {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
{%- endfor -%}
{%- endif -%}
{%- endcapture -%}
The code is this, I didnt know what was important so I copied it all.
{%- assign social_icons = false -%}
{%- assign inline_list = false -%}
{%- assign locale_selector = false -%}
{%- assign country_selector = false -%}
{%- assign show_payment_icons = false -%}
{%- assign show_selectors = false -%}
{%- assign show_country_selector = section.settings.show_currency_selector -%}
{%- if show_country_selector and localization.available_countries.size > 1 -%}
{%- assign country_selector = true -%}
{%- endif -%}
{%- if section.settings.show_locale_selector and localization.available_languages.size > 1 -%}
{%- assign locale_selector = true -%}
{%- endif -%}
{%- if section.settings.show_payment_icons -%}
{%- unless shop.enabled_payment_types == empty -%}
{%- assign show_payment_icons = true -%}
{%- endunless -%}
{%- endif -%}
{%- if country_selector or locale_selector -%}
{%- assign show_selectors = true -%}
{%- endif -%}
{%- if
settings.social_twitter_link != blank
or settings.social_facebook_link != blank
or settings.social_pinterest_link != blank
or settings.social_instagram_link != blank
or settings.social_tumblr_link != blank
or settings.social_snapchat_link != blank
or settings.social_youtube_link != blank
or settings.social_vimeo_link != blank
or request.page_type == 'article'
or request.page_type == 'blog'
-%}
{%- assign social_icons = true -%}
{%- endif -%}
{%- assign payment_width_class = "one-half" -%}
{%- if show_selectors -%}
{%- unless social_icons -%}
{%- assign payment_width_class = "" -%}
{%- endunless -%}
{%- endif -%}
{%- assign copyright_show_class = "medium-up--hide" -%}
{%- if social_icons -%}
{%- unless show_selectors -%}
{%- assign copyright_show_class = "" -%}
{%- endunless -%}
{%- endif -%}
{%- case section.blocks.size -%}
{%- when 1 -%}
{%- assign footer_item = 'site-footer__item--full-width' -%}
{%- assign inline_list = true -%}
{%- when 2 -%}
{%- assign footer_item = 'site-footer__item--one-half' -%}
{%- assign inline_list = true -%}
{%- when 3 -%}
{%- assign footer_item = 'site-footer__item--one-third' -%}
{%- for block in section.blocks -%}
{%- if block.type == 'newsletter' -%}
{%- assign footer_item = 'site-footer__item--one-quarter' -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- when 4 -%}
{%- assign footer_item = 'site-footer__item--one-quarter' -%}
{%- when 5 -%}
{%- assign footer_item = 'site-footer__item--one-fifth' -%}
{%- endcase -%}
{% comment %} Create an appropriate hover color based on text color and brightness {% endcomment %}
{%- assign footer_text_color = section.settings.color_footer_text -%}
{%- assign footer_text_color_brightness = section.settings.color_footer_text | color_brightness -%}
{%- if footer_text_color_brightness <= 26 -%}
{%- assign footer_text_color_hover = footer_text_color | color_lighten: 25 -%}
{%- elsif footer_text_color_brightness <= 65 -%}
{%- assign footer_text_color_hover = footer_text_color | color_lighten: 15 -%}
{%- else -%}
{%- assign footer_text_color_hover = footer_text_color | color_darken: 10 -%}
{%- endif -%}
{%- capture payment_icon_markup -%}
{%- if show_payment_icons -%}
{{ 'general.payment.method' | t }}
{%- for type in shop.enabled_payment_types -%}
- {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
{%- endfor -%}
{%- endif -%}
{%- endcapture -%}
@dmwwebartisan tagged for message above
Yeah I just tried that and that didnt seem to work, its really wanting to stay on the left side of the page not sure why, it could be that I changed something in another section of the code but Im not sure what that could have been.
@media only screen and (min-width: 750px)
{
.site-footer__social-icons {
padding-top: 7.5px;
margin-left: 0px !important;
}
}
Add this code in theme.scss
Same thing, didnt really work out. Any other thoughts?
ul.list--inline.site-footer__social-icons.social-icons.site-footer__icon-list {
text-align: center !Important;
margin-left: -260px !important;
}
Add this.
Okay so that did move the social media icons to the middle but im looking for the copyright text to go towards the middle, finally something actually moved though gives me some hope lol
.grid__item.small--one-whole.site-footer-item-align-right {
text-align: center !important;
}
Remove Previous code add this.
YES!!! You got it working, thank you so much!!!
Would you possibly be willing to help me with another problem im looking to remove the search icon from the top right of the page, I dont think Im going to need it but I cant seem to find that.
I appreciate it regardless even if you dont have time for this last thing.
ok let me check.
I appreciate that a lot!
button.btn--link.site-header__icon.site-header__search-toggle.js-drawer-open-top {
display: none !important;
}
Add this code to theme.scss
That worked perfectly thank you, I’ve been working on this all day trying to do a bunch of these small little things when I have almost no knowledge of code so you’ve been a lot of help. Thanks a lot!
You’re Welcome.
Have a Good Day.