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
<div class="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}">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}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">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;
}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;}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
--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities
updated by @soaringeagle: 07/09/16 09:21:02AM
