SOLVED side bar social icon
-
-
- cindy rodriguez
- Rocketeer
- Posts: 74
- Thanks: 1
-
In the Kirigami template the icons are floating right, is it possible to add this feature in another template and if so, can you direct me to a link or post the steps on how to do so.
tks
CR
-
-
-
- cindy rodriguez
- Rocketeer
- Posts: 74
- Thanks: 1
- Chapelco is the template being used but want the features side inset module from Voxel template
-
-
-
- cdavis411
- Preeminent Rocketeer
- Posts: 17787
- Thanks: 882
- Okay that last bit about Voxel confused me a bit. I understood your first post to mean that you want to use the Kirigami style of social icons in another template. And your next reply seems to indicate that you want to use the Kirigami social icons in Chapelco. Is that correct?
-
-
-
- cindy rodriguez
- Rocketeer
- Posts: 74
- Thanks: 1
-
Template used is: Chapelco
The 2 features one from each template below wanted to see if would be possible to add in above template not in org. files are from below templates ,
Kirigami - the side bar social media icons to float right currently in Kirigami want to add to Chapelco template if poss.
Voxel - the inset module location for Voxel located on home page top right the position is not in the settings location for Chapelco, nice feature would like it in Chapelco template
if you could please assist in how to add these 2 features to Chapelco.
Tks
-
-
-
- cdavis411
- Preeminent Rocketeer
- Posts: 17787
- Thanks: 882
- okay one issue per topic please. I will address the original one once I have had a chance to walk it through on my test site. Thank you for your patience. Please start a different topic for the Voxel inset module.
-
-
-
- cdavis411
- Preeminent Rocketeer
- Posts: 17787
- Thanks: 882
-
okay for the social icons from Kirigami to Chapelco.
1) In the template manager assign the Social Icons to the "Debug" position.
2)You can create a file using a simple text editor for custom css and name it using this format: templatefolder-custom.css (e.g., rt_chapelco-custom.css). For this issue add this to the custom CSS fileMore Info here: www.gantry-framework.org/documentation/j...custom_stylesheet.md \/* Social Icons */ #rt-debug .rt-social-buttons [class^="icon-"]:before, #rt-debug .rt-social-buttons [class*=" icon-"]:before {content:'';} #rt-debug .rt-social-buttons .social-button {background-color: transparent;background-image: none;background-repeat: no-repeat;filter: none;color: #ffffff;text-shadow: none;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;} #rt-debug .rt-social-buttons {right: 0;width: 45px;position: fixed;top: 108px;z-index: 10;padding: 0;margin: 0;} #rt-debug .rt-social-buttons .rt-social-icon {height: 43px;width: 43px;float: right;display: block;background-repeat: no-repeat;margin-bottom: 2px;-webkit-transition: width 0.2s ease-in, background-color 0.2s ease-in;-moz-transition: width 0.2s ease-in, background-color 0.2s ease-in;-o-transition: width 0.2s ease-in, background-color 0.2s ease-in;-ms-transition: width 0.2s ease-in, background-color 0.2s ease-in;transition: width 0.2s ease-in, background-color 0.2s ease-in;} #rt-debug .rt-social-buttons .rt-social-icon:hover {width: 150px;} #rt-debug .rt-social-buttons .rt-social-text {display: none;font-weight: bold;font-size: 1em;margin: 11px 0 11px 40px;float: left;white-space: nowrap;} #rt-debug .rt-social-buttons #rt-facebook-btn .rt-social-text {margin: 11px 0 11px 32px;} #rt-debug .rt-social-buttons a:hover > span {width: auto;} #rt-debug .rt-social-buttons a:hover .rt-social-text {display: block;} #rt-debug .rt-social-buttons #rt-facebook-btn span {background-position: 12px 10px;} #rt-debug .rt-social-buttons #rt-twitter-btn span {background-position: 11px -35px;} #rt-debug .rt-social-buttons #rt-google-btn span {background-position: 10px -127px;} #rt-debug .rt-social-buttons #rt-rss-btn span {background-position: 11px -80px;} #rt-debug .rt-social-buttons #rt-twitter-btn .rt-social-icon, #rt-debug .rt-social-buttons #rt-facebook-btn .rt-social-icon, #rt-debug .rt-social-buttons #rt-google-btn .rt-social-icon, #rt-debug .rt-social-buttons #rt-rss-btn .rt-social-icon {background-color: #33353B;background-image: url(../images/social-icons-kirigami.png);} #rt-debug .rt-social-buttons #rt-facebook-btn:hover .rt-social-icon {background-color: #3B5998;} #rt-debug .rt-social-buttons #rt-twitter-btn:hover .rt-social-icon {background-color: #62BDB2;} #rt-debug .rt-social-buttons #rt-google-btn:hover .rt-social-icon {background-color: #DB4A39;} #rt-debug .rt-social-buttons #rt-rss-btn:hover .rt-social-icon {background-color: #FF8B0F;} #rt-debug .rt-social-buttons .rt-social-text {color: #fff;} #rt-debug .rt-social-buttons .social-button {border-radius: 0;display: block;margin-right: 0;}
3) Copy the Kirigami template's social.php file from the features folder and replace the Chapelco template's file of the same name with it. - Last Edit: 10 years 4 months ago by cdavis411. Reason: fix typo
-
-
-
- MLopez
- Rocketeer
- Posts: 88
- Thanks: 3
- UX/UI Designer
-
Yes,
editorial.comunicadorvisual.com.ve
When i use this solution... my social icon dissapear - Last Edit: 10 years 4 months ago by MLopez.
-
Time to create page: 0.053 seconds