how do I change the text size in the Hover Tilt module? … change solor, font, etc. but not the size. Even if I create a specific class it doesn’t change the size.
I noticed that too, and I explored the BRIC in the developer’s panel. I don’t know to change it within the BRIC except to decide between light or dark, but here is how I found a way to change it for the finished site.
This method is applied after the code is output from BLOCS, but you can test it as follows. Without fully exporting the site. Choose view - preview in browser and safari(or chrome) and preview in the browser and look at the source. In safari, view the source with key command apple + command + u. You can also find that under the development menu. … also found by right-clicking your mouse on the text itself and choosing, ‘inspect element’.
It will look something like this - of course, the font family bit will not match, it will be what you assigned it in BLOCS. also if you didn’t choose light, the style won’t say light in the class description.
<h3 class="hover-tilt-label hover-tilt-light-text" style="font-family: Lato; font-weight: 700; ">Hello World</h3>
I changed mine to teal with this additional code. you could also use the hex value as well here -such as #9E005D which makes a lively spirited pink!
<h3 class="hover-tilt-label hover-tilt-light-text" style="font-family: Lato; font-weight: 700; color:teal; ">Hello World</h3>
<h3 class="hover-tilt-label hover-tilt-light-text" style="font-family: Lato; font-weight: 700; color:#9E005D; ">Hello World</h3>
We can change this in the preview area, by typing right over the code on the view source. it will not be permanent! you can get a good idea of what it would be like, though, and then remember your selection. it will require making the change to the code on after the project is exported. yes its a long way around - maybe the next version of the BRIC will allow color selection but I like this hands-on approach to things and didn’t find it too much to do.
Yes, to get a preview of the changes you can do it like this but surely it could be useful to be able to make functional changes to the bric from blocs and that are permanent
1 Like
I deleted my reply, because I wasn’t sure if the bric was adding inline styles as I haven’t used it.
But generally there is no reasons to edit the exported code. You can add the classes the bric uses to the class manager.
1 Like
the OP stated that even when he created a class for it it didn’t work, and I had the same experience - i kept trying to change colors on the custom class details but they would not apply to the bric. changing the resultant code is the only way I got the results I wanted, I would be happy if editing the class worked so this step was not necessary!
Oh right. Without looking it’s likely the order of the CSS being loaded. You would be able to tell in the safari developer tools.
You could put it in the projected header and add !important to the class.
I probably not understanding what you mean, but the colors changing are working…
The only issue is you have to keep it in dark text if you choose light text it will not change, then you just click in the text and add a class. Then you go to font color and you can change it… it will be slightly different but it works…
Look:
I think there is a filter up the color from the dark text but only @Norm can explain that, but it works:
1 Like
Hello @blasco
Everything expect font size can be changed by adding a class .hover-tilt-label to the class manager. As for size, you need to put the same class into Code Editor and just change the font-size.
Example:
<style> .hover-tilt-label {font-size:100px;}</style>
Hope it helps.
Cheers,
Eldar
1 Like
that is probably exactly what I was not testing properly - I never tested changed the colors in dark mode, because my photo was dark and it was in light mode 100 percent of the time that I was trying it. so I will try this and see if it works. I don’t mind changing the code but I would prefer not doing that unless I need to!
EDIT! I tested this and used Eldar’s example code above to grab the name of the CSS style needed - hover-tilt-label and it works for color change in both the light and dark mode. The custom CSS name must be named exactly : hover-tilt-label and using any custom name for the class other than that will fail, and that is exactly what I was doing. Its not enough just to assign the new class to the object in blocs with any name you like - in some cases - the name must be exactly right. so I learned something very important! Assigning purely customized css names works in every case except for those kinds of custom BRICS or other code where there are custom CSS names already in place.
sorry @Eldar Eldar but maybe I didn’t understand why (I think) I tried to do what you told me but the size of the text doesn’t change!
