advanced tip give your members style control of thier profiles!
Ning To Jamroom
this is a simple example but all the building blocks are there to alow your members to choose some basic styling options
what those options might be are up to you
i beleive you should even be able to use the spectrum module as a color picker to alow passing of color values to elements!
for ning users this is a build your own design studio potentially!
this simple example
@douglas helped with the 1st peices of the puzzle and now its starting to click as to how things work, withg a lil trial and error i was able to do 2 things with very lil code
1 add the ability to put up a custom profile cover photo
and if desired move it behind a partialy transparent layer
as well as add a lil style to the cover photo container
ok on with the lesson
(and im grinning ear to ear now that things are starting to make sence)
step 1
in the profile creation, and profile modification forms open the form designer create the following fields
profile_cover_image
profile_z
give them any title description help text u think they need
make profile image a file field and z a checkbox
dont forget to check make active before saving
and assign the quotas you want to have access to them
now in your skin templates modify the profile_header.tpl
at top you will see
this will be our cover photo container
so find that and edit as so
<div class="container profilecover {if isset($profile_z)}cover-z{/if}">
{if isset($profile_cover_image_size) && strlen($profile_cover_image_size) > 0}
{jrCore_module_function function="jrImage_display" module="jrProfile" type="profile_cover_image" item_id=$_profile_id size="xlarge" class="img_scale" alt=$profile_name title=$hover width=false height=false}
{/if}
now let me explain what im doing here ..and thank you
@douglass for helping me wrap my brain around the 1st peices of the puzzle
1st
<div class="container profilecover {if isset($profile_z)}cover-z{/if}">i'm adding a profilecover class so i can style the cover photo with rounded tops and a box shadow then if the checkbox is checked adds the class cover-z
and then
{if isset($profile_cover_image_size) && strlen($profile_cover_image_size) > 0}
{jrCore_module_function function="jrImage_display" module="jrProfile" type="profile_cover_image" item_id=$_profile_id size="xlarge" class="img_scale" alt=$profile_name title=$hover width=false height=false}{/if}1st it checks to see if you have uploaded a profile cover image and its bigger then 0
next line calls the image handler function that basically just builds an image tag
it says to look for an image in the jrprofile module
of type profile_cover_image (the name we gave the field within the profile module)item_id sets the profile number (1 being the creator) and size (required by the image handler even thiugh the docs say its optional)
now that code builds this code
<img class="img_scale" alt="Soaring Eagle" src="http://greentechnologyforums.com/profile/image/profile_cover_image/1/xlarge/_v=1414984633">
the -v=..not sure where that comes from my guess is a cache handler
but you can see how the bits and peices fit together adding directory entries into the path
so that will only display a cover photo if ones been uploaded instead of putting up a default
next 2 lil peices of css
.container.profilecover > img {
-webkit-border-radius: 3em 3em 0 0 !important;-moz-border-radius: 3em 3em 0 0 !important;border-radius: 3em 3em 0 0 !important;
-webkit-box-shadow: 0 0 0.3em 0.1em rgba(63,127,140,.7);-moz-box-shadow: 0 0 0.3em 0.1em rgba(63,127,140,.7);box-shadow: 0 0 0.3em 0.1em rgba(63,127,140,.7);
margin: 1em;
position: relative;
width: -moz-available;
}this styles the cover photo with border-radius and box-shadow on every cover photo
you can adapt this to alow users to turn on or off any of these options with a checkbox or radiobutton or probably set tyhe color and radius values
and
.cover-z img {z-index:-1;}if they checked the z index checkbox
example of a profile with z index off
http://greentechnologyforums.com/demo-noz
and z index on
http://greentechnologyforums.com/soaring-eagle
theres a module called spectrum that alows you to pick a color from a full spectrum color picker the spectrum can be added to a form designer feild and alow members to change css values
imagine the possibilities
you can build your own design studio giving them the control you choose to give them
updated by @soaringeagle: 07/09/16 09:21:02AM
- 59KB
