Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+1 vote
978 views
in Q2A Core by

I want to move custom fields like facebook, twitter, location, About etc to top section as shown in figure.

I am using muffin theme , can someone please guide me.

Please see the attached image.

by
Its tough for us to do it because some css will also be needed and many of us haven't muffin
by
I'm using Muffin too, there's nothing much with the CSS you can do. Facebook element, Twitter element, location element ,etc .. are not independent DOM elements, that you can "move" them freely to anywhere. They are TR/TD elements of a table, this table is inside a DIV tag. The profile name with the profile avatar and background color belongs to a different DIV tag.

The only way is to redesign the order of elements in a profile page. But I cannot find the correct function that govern this in qa-theme-base.php.
by
Just in case, you insist in "moving", try to add these CSS tricks to one of those elements:


display: block; position: absolute; top: 30px; left: 210 px;

1 Answer

0 votes
by

If every Extra-field has an ID attributed to itself, then you can use a little bit of CSS to do so.

/* Allow this rework only if screen is bigger than 1050px for responsiveness on smaller devices, and avoid other responsive/mobile devices headaches */

@media (min-width: 1050px) {
    tr#userfield-4 {
        position: absolute; /* Makes the element absolute positioned */
        top: -13rem; /* sets the element's position from top. It has to be a negative valute because it's inside a relative positioned parent */
        left: 24rem; /* sets element's position from left */
        max-width: 390px; /* atribute a max-width so it doesn't overlap other elements of the profile cover. Such as favorite button, etc */
        border-bottom: none; /* removes border bottom for aestethics */
    }

        tr#userfield-4 td.qa-form-wide-data {
        display: block; /* allow the td element to be scrolled */
        max-height: 90px; /* set a max-height so it doens't overlap other elements of the profile page, and stays contained in the user cover */
        overflow-y: auto; /* allows scroll for the designated section */
    }

    /* rest of your styles here */
}

There's a lot of things to consider and have in mind while doing this. Concerning about space wise, how much content users write on their about section, which is why I already implemented those values on my answer for allowance to scroll that About section in case texts are way to big to fit that User Cover section.

The social links will be to big to fit where you want them to be located, so I would suggest rework them into Social icons instead of full links, but that would require writing a function to convert the links into icons.

And so on...

So I would suggest hiring a developer to properly move those items into that section, convert the links into icons, and have in mind all the variables and responsiveness that comes with this rework. Because this is more work than it appears on your image xD

by
If you're pondering about hiring. You can send me a PM and we can discuss price ranges.
...