3D Sphere 4.0 - ShortCodes

3D-Sphere transformed over the years quite extensively and nicely, at least I believe so. We went from an old design to a modern responsive website with, I hope, useful information. It has been 11 years already, still online, although with not the content than before. Still, the latest version of the site again showed that you can learn a lot of stuff during these things, and I am proud to move forward with this a bit further.

The 3D-Spehere version 4.0 has been online already for some time. The 4.0 was indicating the migration to Joomla 4.0, however, during the time I am editing this, the current version is 6.0. Of course, the site runs it, and I am glad to migrate the site to the latest release of this great CMS system. With the migration to Joomla 6.0, the 3D-Sphere content plugin was developed further, and below are some examples of what it can do.

Code Prettify

I really wanted this feature in the website and found some plugins that claimed to do so, however, I was not lucky enough to make them work. Later on, I came across highlight.js, and decided to implement it within the 3D-Sphere content plugin together with some css templates. I like how the code snippets are looking now!

        //getters
        $doc = Factory::getApplication()->getDocument();
        //used to add scripts/styles
        $wa = $doc->getWebAssetManager();
        //in case you need it, the path to this plugin
        $pluginPath = 'plugins/content/' . $this->_name;
        //the current view, if you need it
        $view = JFactory::getApplication()->input->get('view');
        //adding sample styles and scripts
        //remove comments if you actually want to use
        $wa->registerAndUseStyle('3dspherecontent.mainstyle',$pluginPath.'/css/style.css');
        
        //getting some options from the config
        $whiteBodybg = $this->params->get('white-body','0');
        $cardColor = $this->params->get('card-color','bg-dark');
        $customcarouselcode = $this->params->get('custom-carousel-code','0');
        $customcarouseljs = $this->params->get('custom-carousel-js','0');
        
        $progresscolor = $this->params->get('progress-color','blue-dark');
        $progressshadow = $this->params->get('progress-shadow','1');
        
        $imagerename = $this->params->get('image-rename','0');
        $imagerenamevalue = $this->params->get('image-rename-value','');

Notes

Notes are something standard in Bootstrap but called "alerts", I like notes a bit more although it is just for me. Anyway, since I was using YJSG in the past a lot of content had these "notes" made up using the YJSG short codes. Hence, I had two options, to replace them one by one or by an SQL querry or create a function that will use the same "code" as by YJSG and just replace it with something new. I went with the second option.

[ yjsgnote color="blue" close="yes" title="I want to donate, how I do that?" border="default" radius="radiusb5" icon="fa fa-question-circle"]You can use the form on the right side.[/yjsgnote] 

[ yjsgnote color="red" close="no" title="I want to donate, how I do that?" border="default" radius="radiusb5" icon="fa fa-question-circle"]You can use the form on the right side.[/yjsgnote] 

[ yjsgnote color="green" close="yes" title="I want to donate, how I do that?" border="default" radius="radiusb5" icon="fa fa-search"]You can use the form on the right side.[/yjsgnote] 

Content Tabs

[ yjsgstabs id="1" type="tabscentered"] 
    [ yjsgstabsgroup title="Include" active="1"] 
        #content
    [/yjsgstabsgroup] 
    [ yjsgstabsgroup title="Time" active="0"] 
        #content
    [/yjsgstabsgroup]
    [ yjsgstabsgroup title="Software" active="0"] 
       #content
    [/yjsgstabsgroup] 
[ /yjsgstabs] 

Solid line

<div class="yjsg-hr-small-hrsolid"></div>

    <div class="yjsg-hr-hrsolid"></div>
    <div class="yjsg-hr-hrdotted"></div>
    <div class="yjsg-hr-hrdashed"></div>
    <div class="yjsg-hr-small-hrsolid"></div>
    <div class="yjsg-hr-large-hrsolid"></div>

Progress Bar

<div class="my_progress_bar yjsg-center" data-border="10" data-end="35" data-percent="true" data-speed="20" data-start="0" data-yjsg-round-progress=""> </div>

<div class="row">
    <div class="col-lg-6">
        <div class="bg-white rounded-lg p-5 shadow">
            <h2 class="h6 font-weight-bold text-center mb-4">Overall progress</h2>
            <!-- Progress bar 1 -->
            <div class="my_progress_bar yjsg-center" data-border="10" data-end="35" data-percent="true" data-speed="20" data-start="0" data-yjsg-round-progress="">&nbsp;
            </div>
            <!-- END -->
            <!-- Demo info -->
            <div class="row text-center mt-4">
                <div class="col-6 border-right">
                    <div class="h4 font-weight-bold mb-0">28%
                    </div>
                    <span class="small text-gray">Last week 
                    </span>
                </div>
                <div class="col-6">
                    <div class="h4 font-weight-bold mb-0">60%
                    </div>
                    <span class="small text-gray">Last month 
                    </span>
                </div>
            </div>
            <!-- END -->
        </div>
    </div>
    <div class="col-lg-6">
        <div class="bg-white rounded-lg p-5 shadow">
            <h2 class="h6 font-weight-bold text-center mb-4">Work hours</h2>
            <!-- Progress bar 2 -->
            <div class="my_progress_bar yjsg-center" data-border="10" data-end="65" data-percent="true" data-speed="20" data-start="0" data-yjsg-round-progress="">&nbsp;
            </div>
            <!-- END -->
            <!-- Demo info-->
            <div class="row text-center mt-4">
                <div class="col-6 border-right">
                    <div class="h4 font-weight-bold mb-0">28%
                    </div>
                    <span class="small text-gray">Last week 
                    </span>
                </div>
                <div class="col-6">
                    <div class="h4 font-weight-bold mb-0">60%
                    </div>
                    <span class="small text-gray">Last month
                    </span>
                </div>
                <div class="col-6">&nbsp;
                </div>
            </div>
            <!-- END -->
        </div>
    </div>
</div>

Tool tip

The tool-tip property uses the Bootstrap feature of displaying a tool tip next to an element. This element can be a button, image, or a string.

[ tooltip tooltippos="top" tooltiptitle="Sample of progress bar code."][ /tooltip]